CSS文件被阻止：MIME类型不匹配（X-Content-Type-Options：nosniff）

我正在开发一个Angular 4应用程序，我想应用一些全局样式。继tutorial at the angular site，我创建我的应用程序的根目录下的“styles.css的”文件，我指的是样式表在我的应用程序中的index.html：CSS文件被阻止：MIME类型不匹配（X-Content-Type-Options：nosniff）

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

角应用成功编译：

$ ng serve 
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 ** 
[...] 
webpack: Compiled successfully.

但是，当我访问的Chromium浏览器http://localhost:4200，控制台显示在

GET http://localhost:4200/styles.css

在Firefox浏览器中，错误的错误是一个比较明确的：

GET 
http://localhost:4200/styles.css [HTTP/1.1 404 Not Found 15ms] 
The resource from "http://localhost:4200/styles.css" was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).

两个文件，index.html，然后styles.css的位于我的角度应用程序的根目录。我试图让more info about the problem：

nosniff 
    Blocks a request if the requested type is 

     "style" and the MIME type is not "text/css", or 
     "script" and the MIME type is not a JavaScript MIME type.

但我不明白为什么它bloking的要求，因为我引用样式表时所指定type="text/css"。

来源

2017-06-20 rodrunner

这是什么说的'styles.css'是MIME类型？ – Raven

使用浏览器开发工具查看请求和响应头。验证MIME类型是否符合您的预期。 –

我刚碰到同样的问题。这似乎是Express的一个怪癖，它可以表现为几个不同的原因，通过搜索网络中“nodejs express css mime type”命中的次数来判断。

尽管type="text/css"属性，我们可以把我们的<link元素，快速的返回CSS文件

Content-Type: "text/html; charset=utf-8"

，而它真的应该返回它作为

Content-Type: "text/css"

对于我来说，快速，肮脏的解决方法是简单地删除rel=属性，即更改

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

到

<link type="text/css" href="styles.css">

测试证实，该CSS文件的下载和风格也实际工作，这是我的目的不够好。

来源

2017-07-15 14:52:35

我可以证实这一点。我更新了'Express'并遇到了同样的问题。删除'rel'属性为我解决了它。 – Tarabass

我不认为这是好建议，删除'rel =“样式表”'会使浏览器不知道文件作为样式表，因此样式将不会被评估和应用 – benjaminz

@benjaminz - 这当然不是一个理想的解决方案，但正如我所说，无论如何，这些风格确实得到了应用。更好的解决方案是修复Express，以便使用正确的MIME类型提供CSS文件。 –

我也删除rel = "stylesheet"，我不再得到MIME类型错误，但款式都没有被加载

来源

2017-12-03 19:08:24

CSS文件被阻止：MIME类型不匹配（X-Content-Type-Options：nosniff）

回答

相关问题