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

【问题标题】：CSS file blocked: MIME type mismatch (X-Content-Type-Options: nosniff)CSS 文件被阻止：MIME 类型不匹配（X-Content-Type-Options：nosniff）
【发布时间】：2017-11-23 06:42:16
【问题描述】：

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

【问题讨论】：

styles.css 的 mimetype 是什么意思？
使用浏览器开发工具查看请求和响应标头。验证 MIME 类型是否符合您的预期。

标签： css node.js angular express mime-types

【解决方案1】：

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

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

【讨论】：

我可以确认这一点。我更新了Express 并遇到了同样的问题。删除为我修复的rel 属性。
我认为这不是一个好建议，删除 rel="stylesheet" 会使浏览器不知道该文件是样式表，因此不会评估和应用样式
@benjaminz - 这当然不是一个理想的解决方案，但正如我所说，无论如何，这些样式确实得到了应用。更好的解决方案是修复 Express，以便它提供具有正确 MIME 类型的 CSS 文件。
我一直在解决这个问题，您的回答帮助我解决了这个问题，谢谢！
@GordThompson。先生，这很有帮助。但我也得到了 JS 的Loading module from “http://localhost:3000/runtime-es2015.858f8dd898b75fe86926.js” was blocked because of a disallowed MIME type (“text/html”).localhost:3000。请帮忙

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

http://localhost:3000/css/style.css 可以工作。

【讨论】：

问题不在于 OP 无法获取文件。路径正确，文件发送到浏览器，但MIME类型不匹配。
@Karl-HenryMartinsson 没错。我有同样的问题。对于所有链接的文件，它一直说类型不匹配。
@ThN 这发生在两年前，但是是的，我知道 OP 由于类型不匹配而出现错误，但是当我在寻找类似问题的答案时，我尝试了建议的解决方案，但仍然有错误，所以我分享了对我有用的方法，以防有人遇到类似问题。

【解决方案4】：

在全栈 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 页面的文件前面添加一个正斜杠（如果您在不使用任何template engines 的情况下呈现 html 页面），express-static 将自动为您完成其余工作。

【讨论】：

【解决方案5】：

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

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

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

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

【讨论】：

这也是我的问题 - 路径更新后，src 路径错误。为什么浏览器没有在网络选项卡中放置 404？奇怪！

【解决方案6】：

这解决了我的问题：

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

【讨论】：

这也是我的解决方案 - 值得指出的是您需要路径： const path = require('path');

【解决方案7】：

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

【讨论】：

【解决方案8】：

我也有这个问题。

我将脚本文件移动到其他位置，现在没有错误：

来自<script src="./scripts/simple-keyboard/keyboard.index.min.js" type="text/html"></script>
给<script src="./scripts/keyboard.index.min.js" type="text/javascript"></script>

正如 Davelli 所指出的，问题不是文件不匹配，而是未找到错误。奇怪的是它返回了错误的错误！

【讨论】：

你需要把所有的脚本和html文件都放在public文件夹里，然后public文件夹外面就是节点文件，例如应用程序.js。如果它是 javascript 文件，请确保您的类型为“text/javascript”。您可能还需要导出它，例如导出模块 Test.js
是的。浏览器错误消息非常具有误导性。这就是让我感到困惑的原因。我照你说的做了，维奥拉！！！它有效... :) 谢谢。
很高兴您发现我的回答很有用^

【解决方案9】：

如果这个解决方案没有帮助：

 app.use(express.static('public'))//for server
<link rel="stylesheet" href="/index.css">//for styles

然后确保 "public" 文件夹存在于根目录中。这是我的情况。

【讨论】：

我确实确保我有一个名为 public 的文件夹和所有必需的文件，如 html 文件、Javascript 文件、Node Server 文件、css 文件夹......都在一个文件夹中，就像你说的那样。按照您在答案中描述的那样进行了更改，但它仍然对我不起作用。
@ThN 你能给我一个项目或smth的链接，让我看看吗？
嗨，我已经发现我的错误了。这是因为我已将包括节点服务器在内的所有文件放在同一个文件夹（公共）中。一旦我将文件重新排列到适当的位置，它现在就可以工作了。谢谢你，M22。
@ThN 我很高兴你自己弄清楚了，以防万一，这就是我的项目的典型外观：ibb.co/jZ19LVL

【解决方案10】：

我也遇到了同样的问题。但我发现这与为你的 style.css 文件使用正确的目录有关。所以我尝试了下面这行代码，它运行良好。

<link rel="stylesheet" type="text/css" href="/app/scss/style.css">

【讨论】：

我也试过这个答案，但我根本无法让它工作。

【解决方案11】：

似乎对我有用的东西正在改变

<script type="text/javascript" src="/lib/matrix.js"></script>

到

<script type="text/javascript" src="./lib/matrix.js"></script>

【讨论】：

我试过了，但这根本不适合我。

【解决方案12】：

我也遇到了这个问题。我能够通过 Kirankumar Gonti 的提示解决问题。

使用以下行：

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

确保设置 const 路径。

您还需要确保您的 css 文件夹嵌套在公用文件夹中。

【讨论】：

我也试过你的答案，但它也不起作用。

【解决方案13】：

我也遇到了这个问题。我能够通过 Kirankumar Gonti 的提示解决问题。

我在 app.js 文件中使用了以下代码行，我没有公用文件夹，但我的 style.css 存储在 css 文件夹中：

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

在我使用的 /css/style.css 文件中：

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

【讨论】：

【解决方案14】：

在我的情况下，我以相反的顺序将下面的代码块弄乱了，所以我收到了这个错误。如果您遇到此问题，请按照以下顺序操作，它可能会有所帮助

1.

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

2.

app.get('*', (req, res) => {
   res.sendFile(path.join(__dirname, 'public/index.html'));
});

3.

app.use('/api', cors(corsOptions), indexRouter);

【讨论】：

【解决方案15】：

这就是发生在我身上的事，我的网站已归档，因此 css 和 js 文件不可用。恢复我的虚拟主机后一切顺利。

所以，请检查网址是否正确。

【讨论】：