Solving the stylesheet not loaded because of MIME-type

Over the past few years, the following error has become very common in the browser console:

Plenty of developers face this problem regardless of the web technology used. So this is not a node.js, angular, express, webpack, spring, or whatever issue. Any surprising, but in 95% of cases, it’s a simple 404 Not Found error.

You can also check for yourself if this is the problem. If you check on the network tab of the developer tool, you will probably see that the browser cannot load the stylesheet file. Or click on the link referenced in the error message, and most likely, you will see some kind of "not found" error in a new browser tab.

Check again carefully for typos in the link. Then again, seriously! In most cases, an omitted or forgotten letter s or .min extension is the culprit.

If you are sure that this is not a problem, then for some reason the web server you are using will not make the stylesheet file available on this path. And this is already going to be a configuration issue. That is already technology-dependent so accordingly, you need to continue to look for the reason why the file is not available. I can’t present these here because there are too many and I don’t even know them all.

The point is to change your search term and not look for the original error, but why the file is not available. 

The key is the X-Content-Type-Options response HTTP header. By default, some web servers send this header parameter with a value of nosniff . As a result, the browser blocks the stylesheet request if the MIME-type is not "text/css". 

That's fine, but I specified a "text/css" type in the code, so what's the problem? Because the requested file could not be found, the server returns a 404 error message, which is already "text/html" and is therefore not accepted as a valid stylesheet. See more details here.

There are also many bad solutions on the internet. Don't use these:

• Do not delete the rel attribute from the link element. The error will indeed disappear, but the browser will not apply that stylesheet.
• Do not want to turn off MIME checking. Although the error message disappears from the console, the style sheet still does not load.
• Do not replace the href attribute with src . The error message also disappears, but the browser still does not load the stylesheet. Besides, src is not a valid attribute for the link element.