CODEWITHSUNDEEP
cssnode.jsangularexpressmime-types
rodrunner
rodrunner

Reputation: 1930

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

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.

Upvotes: 84

Views: 212827

Answers (22)

Adriano
Adriano

Reputation: 1

For me, what fixed it was fixing the file path...

Before:
<link rel="stylesheet" type="text/css" href="./style.css">

After:
<link rel="stylesheet" type="text/css" href="../style.css">

Upvotes: 0

Orient splash
Orient splash

Reputation: 21

In my case I just include "/" before "css/style.css"

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

to

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

I also use express.static('public')

Upvotes: 2

Nishant Jain
Nishant Jain

Reputation: 1

It can throw the error if you're not using type attribute in your link/script tag.so make sure you are using it.

<script defer src="./index.js" type="application/javascript"></script>

Upvotes: 0

Yahya Said
Yahya Said

Reputation: 1

It happened to me, but what really works for me is as follows. If you are using bundling tools mostly they generate their bundle output, like main.34343.js, I just renamed main.34343.js to main.js, I tried to access main.34343.js via my browser and inspected the response, which I found out as a 404 error, after renaming everything works. I registered express static middleware as below.

app.use("/",express.static(_dirname+"./public"))
<link rel="stylesheet" href="static/css/main.css">

Upvotes: -1

marko-36
marko-36

Reputation: 1486

"CSS file blocked: MIME type mismatch" while using VS Code + Live server

If you are getting this error while testing using Live Server (or an alternative) in VS Code, it may seem that the extension is sending a bad mime type together with the CSS files, when in fact it is sending a 404 error, correctly, in case you have a VS Code workplace top level directory setup incorrectly and thus resources can't be reached Typically, if your workplace root is set to a dir above the root dir of the actual app, this might easily go unnoticed in VS Code when coding, but the resources are referenced incorrectly during debugging.

Upvotes: 0

Vorpalv2
Vorpalv2

Reputation: 1

Ran into same issue, after some looking around I figured out that you need to only reference the file inside a specific folder and not the whole directory. example if you are referencing public root inside static app.use(express.static(public)) then you only need to ref <link rel=stylesheet href =css/styles.css> and not the whole directory.

Upvotes: 0

Abiola Aribisala
Abiola Aribisala

Reputation: 45

For anyone still having this error I was able to solve it by including "src/assets" in my angular.json file

"assets": ["src/favicon.ico", "src/assets", "src/upload.php"]

also the directory of your index.html should not be included in the assets. meaning you should not include "src" in "assets"

Upvotes: 0

toha
toha

Reputation: 5510

This is what happened at me, My site was archieved, so the css and js files are not available. After restore my webhost everything goes well.

So, please check are the URLs is correct or not.

Upvotes: -1

Charlie Mac
Charlie Mac

Reputation: 1

I ran into this problem as well. I was able to fix the problem with the tip from Kirankumar Gonti.

I used the following line of code in my app.js file, I didn't have a public folder but had my style.css stored in a css folder:

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

In my /css/style.css file I used:

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

Upvotes: 0

imatwork
imatwork

Reputation: 573

I also had this issue.

I moved the script file to a different location and now there is no error:

from <script src="./scripts/simple-keyboard/keyboard.index.min.js" type="text/html"></script>
to <script src="./scripts/keyboard.index.min.js" type="text/javascript"></script>

As noted by Davelli, the issue wasn't a file mismatch but an error not found. It's strange it returned the wrong error!

Upvotes: 3

SLYHUNTERX
SLYHUNTERX

Reputation: 11

I was facing the same problem. But I found out that it has to do with using the right directory for your style.css file. So I tried this line of code below and it worked perfectly.

<link rel="stylesheet" type="text/css" href="/app/scss/style.css">

Upvotes: 1

Dan
Dan

Reputation: 593

if this solutions does not help:

 app.use(express.static('public'))//for server
<link rel="stylesheet" href="/index.css">//for styles

Then make sure that "public" folder exists in the root directory. This was my case.

Upvotes: 1

vjstereo
vjstereo

Reputation: 1

I ran into this problem as well. I was able to fix the problem with the tip from Kirankumar Gonti.

Use the following line:

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

Make sure to set the const path.

You also want to make sure your css folder is nested inside a public folder.

Upvotes: 0

himiko
himiko

Reputation: 61

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.

Upvotes: 5

Νίκος Δημητρακόπουλος
Νίκος Δημητρακόπουλος

Reputation: 1

What seemed to work for me was changing

<script type="text/javascript" src="/lib/matrix.js"></script>

to 

<script type="text/javascript" src="./lib/matrix.js"></script>

Upvotes: 0

Kirankumar Gonti
Kirankumar Gonti

Reputation: 191

This is solved my problem:

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

Upvotes: 7

Supradeep
Supradeep

Reputation: 161

In my case I had jumbled up the code blocks below in reverse order so I was getting this error. If you have this issue, follow the below order and it might help

1.

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

2.

app.get('*', (req, res) => {
   res.sendFile(path.join(__dirname, 'public/index.html'));
});

3.

app.use('/api', cors(corsOptions), indexRouter);

Upvotes: -1

DaveIIi
DaveIIi

Reputation: 121

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.

Upvotes: 8

rags2riches-prog
rags2riches-prog

Reputation: 1761

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.

Upvotes: 7

motash
motash

Reputation: 617

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.

Upvotes: 22

Fer Cervantes
Fer Cervantes

Reputation: 285

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

Upvotes: 25

Gord Thompson
Gord Thompson

Reputation: 123409

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.

Upvotes: 67

Related Questions