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

css node.js angular express mime-types
rodrunner picture rodrunner · Jun 20, 2017 · Viewed 77.8k times · Source

I am developing an Angular 4 app and I want to apply some global styles. Following the tutorial at the angular site, I've created a "styles.css" file in the root directory of my app, and I'm referring to that stylesheet in the index.html of my app:

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

The angular app is successfully compiled:

$ ng serve 
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
[...]
webpack: Compiled successfully.

But when I visit http://localhost:4200 in a Chromium browser, the console shows an error at

GET http://localhost:4200/styles.css

In a Firefox browser, the error is a bit more explicit:

GET 
http://localhost:4200/styles.css [HTTP/1.1 404 Not Found 15ms]
The resource from "http://localhost:4200/styles.css" was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).

Both files, index.html and styles.css are located in the root directory of my angular app. I've tried to get more info about the problem :

nosniff
    Blocks a request if the requested type is

        "style" and the MIME type is not "text/css", or
        "script" and the MIME type is not a JavaScript MIME type.

But I don't understand why it's bloking the request, since I've specified type="text/css" when referencing the stylesheet.

Answer

Gord Thompson picture Gord Thompson · Jul 15, 2017

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.

Related questions

How can I include css files using node, express, and ejs?

I'm trying to follow the instructions to https://stackoverflow.com/a/18633827/2063561, but I still can't get my styles.css to load. From app.js app.use(express.static(path.join(__dirname, 'public'))); In my .ejs, I have tried both of …

Read More
How to use font-awesome icons from node-modules

I have installed font-awesome 4.0.3 icons using npm install. If I need to use it from node-modules how should I use it in html file? If I need to edit the less file do I need to edit it in node-modules?

Read More
Color text in discord

My goal is to partly color a text. I know I can use .sendCode("css","this is my message"); which we'll make my text yellow but I don't want my whole text to be yellow. Perhaps I could create another .…

Read More