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

Solution 1:

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.

Solution 2:

I also removed rel = "stylesheet", and I no longer get the MIME type error, but the styles are not being loaded