Resource blocked due to MIME type mismatch

[MasterGroosha]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  <!-- Please search GitHub for a similar issue or PR before submitting -->
[ ] Feature request
[ ] Documentation issue or request
[ ] Other

Current behavior

I'm trying a simple bootstrap template. No JS and CSS are loaded because error: "Resource «http://127.0.0.1:5500/css/dashboard.css» blocked due to MIME type mismatch («text/html») (X-Content-Type-Options: nosniff)"

I tried following this advice, however errors are gone and no CSS/JS are loaded. Opening the same "test" page in browser without live-server works and renders fine.

This is how I include CSS:

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

Environment

Browser:
- [x] Firefox version 68

For Tooling issues:

- Live Server: 5.6.1
- Platform:  Windows 10
- Visual Studio Code: vsCodium 1.38.1

[johnathaningle]

I am having this error as well :/

[pvrooyen]

The problem is live-server is serving css with content-type incorrectly set as text/html instead of text/css. Go to networks tab (In Chrome dev tools). Click on one of the red .css files that failed to load. Click on Response Headers and confirm Content-Type: text/html; charset=utf-8 (which is incorrect)

Update: On further investigation I have noticed that my paths when linking the CSS was incorrect. So check your paths. The fact that live-server is trying to serve something with an incorrect type still means this is a possible bug.

[MeirionHughes]

I had this. The problem is the live server isn't serving relative to the index.html, its doing it relative to the workspace / package. i.e. I have

 /packages/foo/dist/index.html
 /packages/foo/dist/css/bar.css

open index.html while vscode is open on the root folder and the browser will error that files are incorrect or it can't find js scripts. Temporary solution is to open vscode directly onto the /dist folder, start the live-server and then it will work fine.

[bendeg]

Had the same issue :

As my working directory is a direct subfolder of the root directory on the web site (/rootdir/workingdir) , in Vscode, I have to open it locally by choosing the folder that is directly above it as the working directory, example :

Locally : ../../../AAAA/workingdir/ => I have to open "AAAA" directory in Vscode, not "workingdir"

Problem solved.

[MaximPVladimirovich]

Make sure the path is correct. changing this: href="css/style.css"
to this: href="/css/style.css" worked! I also did not specify a type.

[t0b1hh]

+1 for incorrect paths as reason.

even if only one path is incorrect, the error will occur for all resources. So if you have an incorrect css path in your html file, you js file will also fail as "incorrect MIME type".

[johnmba]

I think, this is a bug, because, this site worked very fine with live server few months back before now that i have updated my vscode. although the warning stops showing when you remove rel attribute in linking the css file but yet, the files don't load and no error or warning is displayed in the browser console.

[johnmba]

my own is working fine now, the problem was that I have to specify both the type and rel attributes at the same time. So, linking a stylesheet like this: <link type="text/css" href="statitc/styles/formCss.css" rel="stylesheet"> should work. Although, before the update, it used to work without the type attribute

[marko-36]

href="css/style.css" vs. href="/css/style.css" might be the problem. --or-- In VSCODE, you might have the workspace directory set wrong, which causes this:

Make sure that "path" link to the root of the site. In my case, it was pointing to the whole project site, one level above the actual website directory.

[PlanetDestroyyer]

i m having same issue in my flask application anyone got any solution??