Resource Blocked Due to Mime Type Mismatch (X-Content-Type-Options: Nosniff)

CSS file blocked: MIME type mismatch (X-Content-Type-Options: nosniff)

I just ran into the same issue. It appears to be a quirk of Express that can manifest itself for a few different reasons, judging by the number of hits from searching the web for "nodejs express css mime type".

Despite the type="text/css" attribute we put in our <link elements, Express is returning the CSS file as

Content-Type: "text/html; charset=utf-8"

whereas it really should be returning it as

Content-Type: "text/css"

For me, the quick and dirty workaround was to simply remove the rel= attribute, i.e., change

<link rel="stylesheet" type="text/css" href="styles.css">

to

<link type="text/css" href="styles.css">

Testing confirmed that the CSS file was downloaded and the styles did actually work, and that was good enough for my purposes.

Resource was blocked due to MIME type mismatch using pug and node

This is because you are using relative url's in your attributes.

Replace this:

link(href='img/favicon.png' rel='icon')

With this:

link(href='/img/favicon.png' rel='icon')

To explain this further, when you are viewing /employee then the relative link at img/123.jpg is correctly resolved as /img/123.jpg. However, as soon as you go to the url /employee/joeblow then the relative link is looking for /employee/img/123.jpg. You'll be able to confirm this by opening Developer Tools in your browser then looking at the requests made in the Network tab.

Adding the slash at the front of all img elements will ensure that they look for the images in the correct folder, the one off the root (/).

The bootstrap mime-type error must be coming from one of the libraries that is loading correctly but not finding a dependency due to the issue described above.

Related Topics