Resource blocked due to MIME type mismatch

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

[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.

[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.