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

Question

我正在开发一个 Angular 4 应用程序，我想应用一些全局样式。按照 Angular 网站上的教程，我在我的应用程序的根目录中创建了一个“styles.css”文件，我指的是我的应用程序的 index.html 中的那个样式表：

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

Angular 应用程序编译成功：

 $ 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 这两个文件都位于我的 Angular 应用程序的根目录中。我试图获取 有关该问题的更多信息：

 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.

但我不明白为什么它会阻止请求，因为我在引用样式表时指定了 type="text/css" 。

原文由 rodrunner 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我刚刚遇到了同样的问题。从在网上搜索“nodejs express css mime type”的点击次数来看，这似乎是 Express 的一个怪癖，可以出于几个不同的原因表现出来。

尽管 type="text/css" 我们在 <link 元素中添加了属性，但 Express 将 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 文件已下载并且样式确实有效，这对我的目的来说已经足够了。

原文由 Gord Thompson 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我还删除了 rel = "stylesheet" ，我不再收到 MIME 类型错误，但未加载样式

原文由 Fer Cervantes 发布，翻译遵循 CC BY-SA 3.0 许可协议