由于 MIME 类型不匹配 (X-Content-Type-Options: nosniff)，资源被阻止访问。

Question

我正在使用JavaScript和HTML开发网页，之前一切都很顺利，但我收到了一份HTML页面中的错误列表。

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

这些错误是在自动浏览器更新（Mozilla Firefox）后出现的，可能设置中有一些更改。您知道解决此问题的方法吗？

- Sim81

---

不要从GitHub加载文件，而是使用CDN。 - SLaks

Answer 1

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

- dav

---

我也遇到了同样的问题，而且在pub目录中也找不到该文件。我该怎么办？这是一个自定义主题文件。 - saiid

@SaiidatRLTSquare 如果文件不存在，你应该从其他地方找到它并放在那里 - 或者如果该文件不重要 - 只需删除包含它的行（或创建空文件），这样就不会出现错误。 - dav

使用Passenger与Node一起时，我的构建路径出了问题，更新路径解决了它。谢谢！ - Aaron Belchamber

Answer 2

这可以通过将您的URL更改为使用镜像/代理来解决。而不是使用GitHub：

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

使用第三方缓存：

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

rawgit.com 曾经是 一个GitHub的缓存代理服务，自2018年以来已经被关闭。请查看其常见问题解答。

- Zombo

---

在地址中，raw.githubusercontent.com 被替换为cdn.rawgit.com，这将返回正确的 MIME 类型。 - Axel Guilmin

rawgit 即将关闭。您可以按照以下答案中的说明使用 jsdeliver - https://stackoverflow.com/a/64456518/9640177 - Mayank Kumar Chaudhari

Answer 3

我们的DevOps团队在更改了Web服务器配置，添加了X-Content-Type-Options: nosniff后，在生产中出现了这个错误。由于这个原因，浏览器被强制将资源解释为响应标头中提到的content-type参数。

从一开始，我们的应用程序服务器明确将js文件的内容类型设置为text/plain。由于Web服务器未设置X-Content-Type-Options: nosniff，因此浏览器自动将js文件解释为JavaScript文件，尽管内容类型被指定为纯文本。这被称为MIME嗅探。现在，设置X-Content-Type-Options: nosniff后，浏览器被迫不执行MIME嗅探，并将内容类型视为响应标头中指定的类型。因此，它将js文件解释为纯文本文件，并拒绝执行或阻止它们。你的错误信息也显示了同样的问题。

解决方案：让您的服务器将JS文件的content-type设置为

application/javascript;charset=utf-8

这样做，它将正常加载所有JS文件，问题就会得到解决。

- Manish Bansal

---

我需要在哪里设置服务器的内容类型，也就是说我需要保存哪个文件，我正在使用Tomcat 8.5服务器。 - Bhaskara Arani

这完全取决于应用程序架构。在我们的情况下，它是一个基于普通servlet的单体应用程序。因此，它是在服务方法中设置正确的。 - Manish Bansal

改变HTML怎么样？ - Aaron Franke

抱歉，我没有听明白您的意思。这里没有HTML。我们使用基于Servlet的应用程序。您在HTML方面建议做出什么更改？ - Manish Bansal

Answer 4

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

- Priyanka Acharya

Answer 5

你正在使用Express吗？

检查你的路径（注意在/public/后面加上"/"）：

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

//注意：您不需要在“css”之前添加“/”，因为它已经包含在上面：

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

希望这有所帮助

- JPaulino

Answer 6

可能是一条错误的路径。 确保在您的主应用程序文件中有以下内容：

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

以此为例，链接到您的CSS：

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

类似于引用 JS 文件的链接：

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

- Mwongera808

Answer 7

针对 Wordpress 的问题

在我的情况下，我只是忘记在 get_template_directory_uri() 后面加上斜杠 "/"，导致生成的路径错误：

我的错误代码：

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

我的修正代码：

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

- Sabir Hussain

Answer 8

这可能是由于浏览器无法访问文件导致的。在使用Node.js创建应用程序时，我也遇到过这种错误。您可以尝试直接请求脚本文件（复制和粘贴url），看看是否能够检索到它。然后您就可以知道真正的问题所在了。这可能是因为文件所在的文件夹的权限不足，或者浏览器无法找到它，因为路径不正确。在Node.js中，指定文件路由后，一切都能正常工作。

- Vadi

---

根据此MS页面，似乎是MIME类型问题。但是在Node.js中如何指定MIME类型呢？（不应该需要为所有文件指定完整路径，只需指定资产目录即可，对吧？） - not2qubit

@not2qubit 有同样的问题。有什么想法吗？ - BenKoshy

Answer 9

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

- Sergey

Answer 10

当我将Azure存储用作静态网站时，遇到了这个错误，复制的js文件的内容类型为text/plain; charset=utf-8，我将内容类型更改为application/javascript。然后它就可以正常工作了。

- Karthikeyan VK