The script from '*' is being denied execution because its MIME type ('application/json') is not executable, and a strict MIME type check is in place

Here is the code I used to retrieve data from the confluence rest api:

<script type="text/javascript" src="Scripts/jquery.min.js"></script>
<script>
    $.ajax({
        type: "GET",
        url: "https://blog.xxxxx.com/rest/api/content?type=blogpost&spaceKey=xxxxx&expand=space,body.view,version,container",
        contentType: "application/json; charset=utf-8",
        dataType: "jsonp",
        jsonp: 'jsonp-callback',
        async: false,
        success: function (result) {
            console.log(result);
        },
        error: function (xhr, errorText) {
            console.log('Error ' + xhr.responseText);
        }
    });
</script>

Even after referencing this and this, I am still facing an issue. The console shows the error

Refused to execute script from 'https://blog.xxxxx.com/rest/api/content?type=blogpost&spaceKey=xxxxx&…d=space,body.view,version,container&callback=jsonpCallback&_=1413187692508' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled
.

I have tried various combinations like type:post, dataType:json, and dataType:jsonp with jsonp: jsonp-callback, but none of them have resolved my issue.

In the Network tab of chrome developer tools, I can see responses from confluence, but they are not displayed on the console or the page.

If I use dataType:json, I encounter the error

XMLHttpRequest cannot load https://blog.xxxxx.com/rest/api/content?type=blogpost&spaceKey=xxxxx&expand=space,body.view,version,container. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://localhost' is therefore not allowed access
in Chrome.

Update Adding mime type application/json for json in IIS does not work.

Updated code

$.ajax({
            type: 'GET',            
            url: 'https://blog.xxxxx.com/rest/api/content?type=blogpost&spaceKey=xxxxx&expand=space,body.view,version,container',   
            dataType: 'jsonp',
            xhrFields: {                
                withCredentials: false
            },
            headers: {
                "Accept" : "application/json; charset=utf-8",
                "Content-Type": "application/javascript; charset=utf-8",
                "Access-Control-Allow-Origin" : "*"
            },
            success: function (result) {
                $('#blog').html(result);
            },
            error: function (xhr, errorText) {
                console.log('Error ' + xhr.responseText);
            }
        });

The same error persists.

Response Body

results: [{id:3342352, type:blogpost, title:The stocks that are set to fly (or crash),…},…]
0: {id:3342352, type:blogpost, title:The stocks that are set to fly (or crash),…}
1: {id:3833861, type:blogpost, title:Before earnings season, it's downgrade season,…}
2: {id:3833876, type:blogpost, title:Petrobras - what goes up, must come down,…}
3: {id:3833882, type:blogpost, title:Fishing for Income in the FTSE 100,…}
4: {id:4489219, type:blogpost, title:A Ray of Light Among the Gathering German Gloom,…}
5: {id:4489234, type:blogpost, title:Insider trading falls as buybacks dominate share prices,…}
6: {id:4489241, type:blogpost, title:El Clasico: Nike vs Adidas,…}
7: {id:4489248, type:blogpost, title:Dollar uncertainty exposes investors' complacency,…}
8: {id:4489254, type:blogpost, title:Worst yet to come for the Australian miners,…}
9: {id:4489258, type:blogpost, title:Using Aggregate List Views to Find Lurking Risks,…}
size: 10
start: 0

How do I resolve the issue of

MIME type ('application/json') is not executable, and strict MIME type checking is enabled
in confluence rest api ???

Answer №1

http://website.xxxxx.com/rest/api/content?type=article&spaceKey=yyyyy&expand=space,body.view,version,container
is delivering JSON data.

You have instructed jQuery to interpret it as JSONP.

It's important to note that JSON and JSONP are two distinct formats.

To resolve this issue, you must either adjust the server to respond with JSONP or modify the JavaScript code to expect JSON instead.

The requested resource lacks an 'Access-Control-Allow-Origin' header

If you switch the client to anticipate JSON, the server (website.xxxxx.com) must be configured to provide CORS headers allowing the browser to bypass the Same Origin Policy restrictions.

Answer №2

Upon reviewing Documentation:

Specifically designated for GET requests, the expected content type should strictly adhere to application/javascript.

Additionally, verify JSONP capabilities are enabled.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Synchronizing multiple file changes simultaneously in Node.js

I have a small development server set up specifically for writing missing translations into files. app.post('/locales/add/:language/:namespace', async (req, res) => { const { language, namespace } = req.params // Utilizing fs.promises l ...

Create a custom jQuery plugin that enables users to toggle checkboxes with the click of a button

Having trouble with my jQuery button code that is supposed to toggle associated checkboxes but ends up freezing the browser. I am in need of the following functionalities: 1) Clicking on "select all" should select all checkboxes. 2) Clicking on "select all ...

Converting device log data files into JSON format with Python

I have a task to analyze device logs retrieved from a broadcom source The log text file structure is as follows: bmx-95-ccs019:FID928:admin> fdmishow Local HBA database contains: 10:00:00:30:ma:i1:3g:2e Ports: 1 10:00:00:30:ma:i1:3g:2e Po ...

Exploring Angular modules has shed light on a certain behavior that has left me puzzled - specifically, when diving into JavaScript code that includes the

I am currently working with angularjs version 1.4.3 and I find myself puzzled by a certain segment of code in the Jasmine Spec Runner that has been generated. Upon generation, Jasmine (using ChutzPath) creates this particular piece of code: (function ...

Date range within a conditional statement

I have encountered this code snippet: function auto_select_param_call_time() { if (today() == date("02.01.2017") || today() == date("03.01.2017")) { auto_click_param("call_time", "Non-working day"); } else { //Do something else ...

Trimming content within an editable div in JavaScript: A guide

I am working on an editable div feature where users can input text for comments. My goal is to eliminate any unnecessary spaces before and after the text. For example, if a user types: "&nbsp;&nbsp;Hello&nbsp;world&nbsp;&nbsp;&nbsp ...

Prerender is running independently of the dynamic page title and meta tags rendering process

As part of a POC, I was integrating prerender.io with an angular-node application for SEO purposes. My application can be found HERE. The good news is that all three links are being crawled successfully, as confirmed by receiving a 200 OK status for all li ...

Tips for adding a notification badge to a tableview

Is there a way to create a notification badge for a table view? The goal is to have the badge displayed when new data is present in the table view, and if more new data arrives, the badge should be added automatically. https://i.stack.imgur.com/nBGLq.pn ...

Swapping mouse cursor using JavaScript

Currently, I am working on a painting application in JavaScript that utilizes the Canvas Object. I would like to customize the mouse cursor when it hovers over the Canvas object. Can anyone advise me on how to accomplish this? ...

Using jQuery to Obtain a Random Item

Just started diving into ajax requests using jQuery. While I've checked out some other posts, I'm not quite sure how to go about implementing it. Right now my code is only grabbing the first 3 items, but I want it to grab 3 random items from the ...

I can't figure out why the data in this JSON string keeps altering within my ajax function

I am encountering an issue with passing an array of JSON objects to my controller. Despite appearing well-formed and correctly populated when I insert an alert before the ajax call, some variables are showing null values when inspecting the payload of the ...

Catalog of items in Mustache

I am currently working on generating HTML content using the mustache template engine. However, I have encountered an issue when trying to render a list of objects. Below is an example of my object: var Prod={ "Object1": { "name": "name1", "cat ...

"Optimizing Image Display in Web Browsers

Currently, I am using JavaScript to dynamically size a transparent .gif on my website. The original image size is approximately 200x200 pixels, but it's usually resized to be between 600x600 and 800x800. When viewing the resized image in IE8 and FF3, ...

Combining multiple models in a single view using Ruby on Rails with ajax

Currently, I am in the process of developing a Ruby-on-Rails web application that serves as a tool for tracking product technical specifications. This marks my initial attempt at creating a RoR app after completing Michael Hartl's Rails Tutorial. Desp ...

Utilizing a drop-down menu to display two distinct sets of data tables

After spending some time on my WordPress site, I've encountered a problem that has me feeling stuck. Currently, I have two functioning datatables which are displaying one on top of the other on the page. Additionally, there is a dropdown selection box ...

Can dynamic CSS imports be unloaded in a React application?

I am facing an issue with loading two files using react.lazy and suspense: import React, { Suspense, lazy } from "react"; import { Route, Redirect } from 'react-router-dom'; const MainLayout = lazy(() => import('Components/Layout/MainL ...

Update your mappings for the city of Istanbul when utilizing both TypeScript and Babel

Currently, I am facing the challenge of generating code coverage for my TypeScript project using remap Istanbul. The issue arises due to the usage of async/await in my code, which TypeScript cannot transpile into ES5 directly. To circumvent this limitation ...

Can an input element be used to showcase a chosen image on the screen?

I would like to display the selected image from an input element. Can this be done with a local file, accessing the image on the client side, or do I need to upload it to a server? Here is my React code attempt: I can retrieve the correct file name from t ...

Transforming an Ext.data.TreeStore data structure into a JSON format

How can I convert an Ext.data.TreeStore to a string for saving to Local Storage? I tried using Ext.encode() but it's giving me a circular structure error. Has anyone encountered this issue and found a workaround? ...

Having trouble incorporating a JavaScript snippet from Google Trends into an HTML webpage

Hey everyone, I've been trying to incorporate a JavaScript script to display Google Trends on an HTML page. I copied the embed code directly from the first image at and modified it as follows. Unfortunately, it's not working as expected. <ht ...