Resource blocked due to MIME type mismatch (X-Content-Type-Options: nosniff)

Question

I am developing a web page using JavaScript and HTML, everything was working good when I have received this list of errors from my HTML page:

Answer 1

i also facing this same problem in django server.So i changed DEBUG = True in settings.py file its working

Answer 2

This might be because the browser cannot access a file. I stumbled with this type of error when creating application with node.js. You can try to directly request the script file (copying and pasting url) and see if you can retrieve it. You can see then what the real problem is. It can be because of permission of folder in which the file is located, or browser just cannot find it due to incorrect path to it. In node.js, after specifying route to file, all works.

Answer 3

It happened to me for wrong tag. By mistake I add the js file in link tag.

Example: (The Wrong One)

<link rel="stylesheet" href="plugins/timepicker/bootstrap-timepicker.min.js">

It solved by using the correct tag for javascript. Example:

<script src="plugins/timepicker/bootstrap-timepicker.min.js"></script>

Answer 4

I've solved this problem by changing charset in js-files from UTF-8 without BOM to simple UTF-8 in Notepad++

Answer 5

We started facing this error in production after our devops team changed the webserver configuration by adding X-Content-Type-Options: nosniff. Now, due to this, browser was forced to interpret the resources as it was mentioned in content-type parameter of response headers.

Now, from the beginning, our application server was explicitly setting content-type of the js files as text/plain. Since, X-Content-Type-Options: nosniff was not set in webserver, browser was automatically interpreting the js files as JavaScript files although the content-type was mentioned as text/plain. This is called as MIME-sniffing. Now, after setting X-Content-Type-Options: nosniff, browser was forced to not do the MIME-sniffing and take the content-type as mentioned in response headers. Due to this, it did interpret js files as plain text files and denied to execute them or blocked them. The same is shown in your errors.

Solution: is to make your server set the content-type of JS files as

application/javascript;charset=utf-8

This way, it will load all JS files normally and issue will get resolved.

Answer 6

Are you using express?

Check your path(note the "/" after /public/):

app.use(express.static(__dirname + "/public/"));

//note: you do not need the "/" before "css" because its already included above:

rel="stylesheet" href="css/style.css

Hope this helps