disable chrome strict MIME type checking on local dev disable chrome strict MIME type checking on local dev google-chrome google-chrome

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


Try Hard Reloading or Empty cache and hard reload the page.

To do that:

  1. Open Inspect. (CTRL + SHIFT + I)
  2. Right-click on the refresh button(found before address bar) and select the appropriate option.


I ran into same problem and tried many different methods but the issue was i was not adding the devServer property to webpack.config.js module export.

module.exports = {    entry: src + '/js/index.js',    output: {        path: dist,        filename: 'js/bundle.js'    },    devServer: {        contentBase: './dist'    }}

in this code, without the devServer config added, i was getting 404 and Mime-type issue,

adding this resolved the error.

Hope it helps someone troubleshoot.