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

Question

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 directo

Answer 1

Had a similar problem with a javascript file (as opposed to css) in an Angular app. In reality, the problem wasn't with the Mime type (as the outer error message indicated) but was ultimately a "404 Not Found" error.

In my case, putting the script file anywhere but in the "assets" folder resulted in the 404 and eventually the mime type error. The following tag worked for me in the head section of index.html:

<script src="assets/plugins/jquery.min.js" type="text/javascript"></script>

The assets folder is a sibling of the Index.html file.

Answer 2

A simple hack is to add a forward slash / before the the path to the stylesheet used. For me it was href='css/style.css', changed it to href='/css/style.css'. Worked like a charm.

Answer 3

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.

Answer 4

This is solved my problem:

app.use('/public', express.static(path.join(__dirname, "public")));

Answer 5

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

Answer 6

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.