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

Transferring a DOM element to a different window while preserving event listeners in Internet Explorer 11

I am tasked with creating a webpage feature that allows users to detach a section of the page and move it to a new window on a second monitor, then reattach it back to the main page. The detached section must retain its state and event listeners during the ...

React code to automatically scroll to the top of the page when the user clicks the

Whenever the URL changes or the page is reloaded in my project, I need it to scroll back to the top. While most scenarios work fine, I'm encountering an issue with the browser's back button. Despite a change in the pathname, the page fails to scr ...

iOS devices will not scroll horizontally if there is a div that scrolls vertically within a div that scrolls horizontally

Picture a div that scrolls horizontally, housing two vertical-scrolling divs. You'll need to scroll left and right to navigate, then up and down inside the inner divs to read the content. /* RESET TO MINIMUM */ body, html { height: 100%; mar ...

When node.js v6.11.2 is installed on Windows 7, it does not include the correct npm version

When trying to install node.js v6.11.2 on my Windows 7 computer, I am encountering an issue where it is installing the incorrect version of npm alongside it. Even after downloading the installer directly from node.js' website which claims that 6.11.2 ...

What is the best way to search for documents that have all conditions met within a sub-array entry?

My rolesandresponsibilities collection document is displayed below: [{ "_id": { "$oid": "58b6c380734d1d48176c9e69" }, "role": "Admin", "resource": [ { "id": "blog", "permissions": [ " ...

You can't retrieve a JSON object using Javascript

Every time I execute the javascript/php code below, I encounter an issue where I keep receiving "undefined" when trying to alert the 'userid' property of the json object. However, if I turn the json object into a string using stringify(), it corr ...

Creating a method in Angular that combines async/await functionality with Observables

After transitioning from using async/await to Observables in Angular, I am trying to refactor the following code snippet to make it work with Observables: async refreshToken() { const headers = this.authStorage.getRequestHeader(); const body = { ...

Should we employ getAttribute() or avoid it entirely? That is the ultimate query

Similar Topic: JavaScript setAttribute vs .attribute= javascript dom, how to handle "special properties" as versus attributes? On multiple occasions, I've encountered criticism in forums or Usenet about the way I access attributes i ...

I'm having trouble figuring out why this React Router setup is not functioning properly. Can anyone provide any insights

As I delve into react routing practice, I've put together a geography-based web app. Starting off, I configured the router paths: import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import { BrowserRo ...

A guide on converting a JSON object into a single-element array in Java

I am facing a dilemma with converting my Java class to JSON format. The server that I need to send this data to requires a single-element JSON array, containing a key-value map For instance, let's say we have a class like this: public class Input { ...

What are the steps to make ng-show functional in an AngularJS application?

I am attempting to implement a hover effect where an image is displayed over another image upon hovering over its container. I have been trying to achieve this using Angular and ng-show, but for some reason, the image with the ng-show attribute remains hid ...

Using react-input-mask together with a child component in React is not compatible

I've been exploring ways to mask a Material UI TextField, and after researching some solutions online, I came across this code snippet: <InputMask mask="(0)999 999 99 99" value={phone} disabled={false} ...

Using Javascript to create a radio button group

Is there a way to trigger an alert message when all radio buttons are checked as 'no'? I currently am only able to check each radio button individually. //The method I currently know $('#attraction1').change( function(){ if ($(this ...

Is there a way to cycle through an array with each click?

I am currently working on implementing a slider feature that enables users to navigate through different pieces of information by clicking on arrows. However, I have encountered an issue where one arrow works correctly (forward), but the other arrow does n ...

Obtain information stored locally when an internet connection is established

I'm currently facing an issue with my Local Storage data retrieval process in Vuejs while being online. My ToDo app setup consists of Vuejs, Laravel, and MySQL. When the internet connection is available, I store data in localStorage. The ToDo app has ...

What function does this array serve following the object that was returned?

Could someone explain the usage of [this.props.currency] at the end of the return object, or direct me to a resource where I can learn more about this coding pattern as it is unfamiliar to me. I am not inquiring about the definition of this.props.currency ...

Why should one bother with specifying types when defining a variable in Typescript?

As someone new to Typescript, I've come to appreciate its many advantages when working on larger applications and with multiple team members :) Imagine you have the following TypeScript code: declare const num = 5: number; Why is this better than: ...

Dynamically Growing Navigation Bar Elements with Nested Subcategories Based on Class Identification

Let's say you have a menu bar structured as follows: <nav> <ul class="nav"> <li class="menu1"><a href="#">Menu Item 1</a></li> <li class="menu2"><a href="#">Menu Item 2</a> <ul& ...

Multi-Slide AngularJS Carousel

My current setup includes a carousel like so: <div> <carousel id="myC" interval="3000" > <slide ng-repeat="order in orders"> <img ng-src="whatever.jpg" style="margin:auto;"> <div ...

A guide to formatting a JSON file with single quotes using jq for a cleaner output

{ 'abc': { 'title': 'James', 'location': 'Australia' }, 'xyz': { 'title': 'Michael', 'location': 'New Zealand' } } ...