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

我正在开发一个Angular 4应用程序,我想应用一些全局样式.在 tutorial at the angular site之后,我在我的应用程序的根目录中创建了一个“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.

但是当我在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.

但我不明白为什么它的请求很臃肿,因为我在引用样式表时指定了type =“text / css”.

解决方法

我刚遇到同样的问题.它似乎是 Express的一个怪癖,它可以出于几个不同的原因而表现出来,从搜索网络“nodejs express css mime type”的点击次数来判断.

尽管我们在< link元素中输入了type =“text / css”属性,但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文件并且样式确实有效,这对我的目的来说已经足够了.