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

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

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.

In running into the same kind of issue for a full stack web application (in development), I simply solved the problem by correctly linking the css file to the page rendered. Removing the rel = stylesheet, as suggested above, prevents the error to show up in the browser but it does not load the styles that should be applied to the page. In short, it isn't a solution.

If you are using express-static you can use this as an example:

Server-side:

app.use(express.static(__dirname + "/public", {
    index: false, 
    immutable: true, 
    cacheControl: true,
    maxAge: "30d"
}));

Client-side:

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

Just add a forward slash in front of the file you wish to link to the html page (if you are rendering html pages without using any template engines) and express-static will do the rest automatically for you.

Some answers suggested removing rel="stylesheet", that didn't work out for me however. According to the expressjs documentation: https://expressjs.com/en/starter/static-files.html use express.static function to serve static files such as CSS, JavaScript,etc...

app.use(express.static('public'))

and from there you should be able to load any file under the public directory for example, if you have a style.css file inside the directory {PROJECT_PATH}/public/css/

http://localhost:3000/css/style.css will work.