Disable Chrome Strict Mime Type Checking

Disable Chrome strict MIME type checking

The server should respond with the correct MIME Type for JSONP application/javascript and your request should tell jQuery you are loading JSONP dataType: 'jsonp'

Please see this answer for further details !
You can also have a look a this one as it explains why loading .js file with text/plain won't work.

disable chrome strict MIME type checking on local dev

Your question is from a while ago, but ranks well on Google for this problem so I wanted to chip in with a couple pointers.

It might be an HTTP/404 in disguise

The error message is probably just misleading you.
It's unfortunate that Google Chrome removes the response entirely, even the preview of the "Network" dev panel.

The MIME type might be incorrect because the server is answering with an HTTP 404 message.

To test: Open the URL to the CSS file in the browser directly, or fetch it with a tool like wget.

Have you checked if the path is correct? Depending on your configuration the css file might not be where it was before (Assuming it's not a problem with webpack or its configuration).

I can just guess blindly here what the correct URL might be...

http://localhost:10001/node_modules/font-awesome/css/font-awesome.min.css

http://localhost:10001/css/font-awesome/font-awesome.min.css

http://localhost:10001/css/font-awesome.min.css

http://localhost:10001/font-awesome.min.css

Checking the request header

In general, not just in case of CSS responses:

The request headers can be prepared to gracefully fallback, should a text/html response come through (the default Apache 404 page, for example).

Accept: text/css, text/plain, */*

But you should not configure */* as acceptable for every request. It's not always useful, even on a local development environment - responses of the wrong type should be fixed early.

Why frameworks want to handle this gracefully

The server may deliver the correct answer, but with an incorrect Content-Type header.
The framework assumes the server "must have meant application/json" and lets the JSON parser to its thing anways.

If this works, the framework can just ignore the incorrect Content-Type and still function.

The goal of this is mainly to run on shared hosting environments where editing .htaccess settings may be impossible.

It's ok if your application handles content types more strict, with the drawback of debugging errors like this from time to time.

Related answers

If this doesn't help, answers from here were helpful for me:

Stylesheet not loaded because of MIME-type

Refused to execute script, strict MIME type checking is enabled?

You have a <script> element that is trying to load some external JavaScript.

The URL you have given it points to a JSON file and not a JavaScript program.

The server is correctly reporting that it is JSON so the browser is aborting with that error message instead of trying to execute the JSON as JavaScript (which would throw an error).

---

Odds are that the underlying reason for this is that you are trying to make an Ajax request, have hit a cross origin error and have tried to fix it by telling jQuery that you are using JSONP. This only works if the URL provides JSONP (which is a different subset of JavaScript), which this one doesn't.

The same URL with the additional query string parameter callback=the_name_of_your_callback_function does return JavaScript though.

AJAX error message on Chrome, MIME type checking is enabled

You are telling jQuery to read it as JSONP.

JSON and JSONP are different.

You need to either change the server to respond with JSONP or change the JavaScript to expect JSON.

If you change the client to expect JSON, then you also need to change the server (quotesondesign.com) to provide the CORS headers that give the browser permission to ignore the Same Origin Policy.

MIME type ('application/json') is not executable, and strict MIME type checking is enabled

Here's a working version:

<div id="sensex_value"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  var sensex =
    'http://www.whateverorigin.org/get?url=' +
    encodeURIComponent(
      'https://query1.finance.yahoo.com/v8/finance/chart/^BSESN'
    ) +
    '&callback=?';

  jQuery(function ($) {
    $.getJSON(sensex, function (data) {
      console.log(data.contents.chart.result[0].meta.regularMarketPrice);
      var sensex_value = data.contents.chart.result[0].meta.regularMarketPrice;
      document.getElementById('sensex_value').innerHTML = String(sensex_value);
    });
  });
</script>

Notable changes:

• data.contents.chart.result[0].meta.regularMarketPrice is the correct path
• I'm using whateverorigin.org to disable CORS. IMPORTANT: you shouldn't use it in production because websites like this are not reliable, instead, you should create your own backend API that would make requests to yahoo.

Everything else you got right.

---

Related Topics