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:

The resource from “https://raw.githubusercontent.com/dataarts/dat.gui/master/build/dat.gui.min.js”
  was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
The resource from “https://raw.githubusercontent.com/mrdoob/three.js/dev/build/three.js” was
  blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
The resource from “https://raw.githubusercontent.com/mrdoob/three.js/master/examples/js/renderers/CanvasRenderer.js”
  was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
The resource from “https://raw.githubusercontent.com/mrdoob/three.js/master/examples/js/renderers/Projector.js”
  was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
The resource from “https://raw.githubusercontent.com/mrdoob/three.js/dev/build/three.js” was
  blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).

These errors appeared after an automatic browser update (Mozilla Firefox), may be something has been changed in the set up. Do you know any way to solve this problem?

Answer 1

检查文件路径是否正确并且文件是否存在 - 在我的情况下这是问题 - 当我修复它时，错误消失了

Answer 2

This can be fixed by changing your URL to use a mirror/proxy. Instead of using GitHub:

https://raw.githubusercontent.com/svnpenn/bm/master/yt-dl/yt-dl.js
Content-Type: text/plain; charset=utf-8

Use a third-party cache:

https://cdn.rawgit.com/svnpenn/bm/master/yt-dl/yt-dl.js
content-type: application/javascript;charset=utf-8

rawgit.com was a caching proxy service for GitHub that has shut down since 2018 . See its FAQ

Answer 3

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 4

检查您的路径，如果给定路径中不存在文件，则会出现此错误。

Answer 5

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

Answer 6

For Wordpress

In my case i just missed the slash "/" after get_template_directory_uri() so resulted / generated path was wrong:

My Wrong code :

wp_enqueue_script( 'retina-js', get_template_directory_uri().'js/retina.min.js' ); 

My Corrected Code :

wp_enqueue_script( 'retina-js', get_template_directory_uri().'/js/retina.min.js' );

Answer 7

It might be a wrong path. Ensure in your main app file you have:

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

Example link to your css as:

<link href="/css/clean-blog.min.css" rel="stylesheet">

similar for link to js files:

<script src="/js/clean-blog.min.js"></script>

Answer 8

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 9

我通过将 js 文件中的字符集从没有 BOM 的 UTF-8 更改为 Notepad++ 中的简单 UTF-8 解决了这个问题

Answer 10

I had this error when i was using the azure storage as a static website, the js files that are copied had the content type as text/plain; charset=utf-8 text/plain; charset=utf-8 and i changed the content type to application/javascript

It started working.

Answer 11

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 12

See for the protocols HTTPS and HTTP

Sometimes if you are using mixed protocols [this happens mostly with JSONP callbacks ] you can end up in this ERROR.

Make sure both the web-page and the resource page have the same HTTP protocols.

Answer 13

I got this problem, when having a function name in the url parameters (firefox 68).

Eg https://.../test.html?concat() where test.html is

<!DOCTYPE html>
<html>
<script src="https://unpkg.com/mathjs/lib/browser/math.js"></script>
</html>

concat is a function in math.js .

I have no idea, why it happens at all. And it occurs least for this function, while some other functions have no effect.

Answer 14

For anyone still having this error in Angular 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":[ ]

Answer 15

我在 django 服务器中也遇到了同样的问题。所以我在 settings.py 文件中更改了 DEBUG = True 它的工作