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

Question

我正在开发一个Angular 4应用程序,我想应用一些全局样式.按照角网站上的教程,我在我的应用程序的根目录中创建了一个"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都位于我的角度应用程序的根目录中.我试图获得有关该问题的更多信息:

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"在引用样式表时已经指定了.

Answer 1

我刚遇到同样的问题.它似乎是一个快速的怪癖,可以出于几个不同的原因表现出来,从搜索网络的"nodejs表达css mime类型"的命中数来判断.

尽管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文件并且样式确实有效,这对我的目的来说已经足够了.

Answer 2

一些答案建议删除 rel="stylesheet"，但这对我不起作用。根据 expressjs 文档：https ://expressjs.com/en/starter/static-files.html 使用express.static函数来服务静态文件，如 CSS、JavaScript 等...

app.use(express.static('public'))

从那里你应该能够加载 public 目录下的任何文件，例如，如果目录中有 style.css 文件 {PROJECT_PATH}/public/css/

http://localhost:3000/css/style.css 将工作。

Answer 3

在 Angular 应用程序中的 javascript 文件（而不是 css）也有类似的问题。实际上，问题不在于 Mime 类型（如外部错误消息所示），而最终是“404 Not Found”错误。

就我而言，将脚本文件放在“assets”文件夹之外的任何位置都会导致 404 错误，并最终导致 mime 类型错误。以下标签在 index.html 的 head 部分对我有用：

<script src="assets/plugins/jquery.min.js" type="text/javascript"></script>

asset 文件夹是 Index.html 文件的同级文件夹。

Answer 4

这解决了我的问题：

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

Answer 5

我也删除了rel = "stylesheet"，并且不再收到MIME类型错误，但是样式没有被加载

Answer 6

在遇到全栈 Web 应用程序（开发中）的同类问题时，我只是通过将 css 文件正确链接到呈现的页面来解决问题。删除rel = stylesheet如上所述，可防止错误显示在浏览器中，但不会加载应应用于页面的样式。简而言之，这不是解决方案。

如果您正在使用 express-static您可以以此为例：

服务器端：

app.use(express.static(__dirname + "/public", {
    index: false, 
    immutable: true, 
    cacheControl: true,
    maxAge: "30d"
}));

客户端：

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

只需在您希望链接到 html 页面的文件前添加一个正斜杠（如果您正在渲染 html 页面而不使用 any template engines），express-static 会自动为您完成剩下的工作。

Answer 7

/一个简单的技巧是在所使用的样式表的路径之前添加正斜杠。对我来说是href='css/style.css'，改成href='/css/style.css'。工作起来就像一个魅力。