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

我正在开发一个 Angular 4 应用程序，我想应用一些全局样式。继角度站点的教程 https://angular.io/tutorial/toh-pt5#global-application-styles，我在应用程序的根目录中创建了一个“styles.css”文件，并且我在应用程序的 index.html 中引用了该样式表：

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

但当我访问时http://本地主机:4200 http://localhost:4200在 Chromium 浏览器中，控制台显示错误

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 应用程序的根目录中。 我尝试过有关该问题的更多信息 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options :

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"当引用样式表时。

我刚刚遇到了同样的问题。这似乎是一个怪癖Express https://expressjs.com/从网上搜索“nodejs express css mime type”的点击次数来看，这可能有几个不同的原因。

尽管type="text/css"我们放入的属性<linkelements，Express 将 CSS 文件返回为

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

而它确实应该将其返回为

Content-Type: "text/css"

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

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

to

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

测试证实 CSS 文件已下载，并且样式确实有效，这足以满足我的目的。