CSS 文件被阻止：MIME 类型不匹配 (X-Content-Type-Options: nosniff)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44657829/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS file blocked: MIME type mismatch (X-Content-Type-Options: nosniff)
提问by rodrunner
I am developing an Angular 4 app and I want to apply some global styles. Following the tutorial at the angular site, I've created a "styles.css" file in the root directory of my app, and I'm referring to that stylesheet in the index.html of my app:
我正在开发一个 Angular 4 应用程序，我想应用一些全局样式。按照angular site 上的教程，我在我的应用程序的根目录中创建了一个“styles.css”文件，我指的是我的应用程序的 index.html 中的那个样式表：
<link rel="stylesheet" type="text/css" href="styles.css">
The angular app is successfully compiled:
angular 应用编译成功：
$ ng serve
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
[...]
webpack: Compiled successfully.
But when I visit http://localhost:4200in a Chromium browser, the console shows an error at
但是当我在 Chromium 浏览器中访问http://localhost:4200时，控制台在
GET http://localhost:4200/styles.css
In a Firefox browser, the error is a bit more explicit:
在 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).
Both files, index.html and styles.css are located in the root directory of my angular app. I've tried to get more info about the problem:
index.html 和 style.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.
But I don't understand why it's bloking the request, since I've specified type="text/css"when referencing the stylesheet.
但我不明白为什么它会阻止请求，因为我type="text/css"在引用样式表时已经指定了。
回答by Gord Thompson
I just ran into the same issue. It appears to be a quirk of Expressthat can manifest itself for a few different reasons, judging by the number of hits from searching the web for "nodejs express css mime type".
我刚刚遇到了同样的问题。从在网络上搜索“nodejs express css mime type”的点击次数来判断，这似乎是Express 的一个怪癖，它可以由于一些不同的原因而表现出来。
Despite the type="text/css"attribute we put in our <linkelements, Express is returning the CSS file as
尽管type="text/css"我们在<link元素中放置了属性，但 Express 将 CSS 文件返回为
Content-Type: "text/html; charset=utf-8"
whereas it really should be returning it as
而它真的应该将它作为
Content-Type: "text/css"
For me, the quick and dirty workaround was to simply remove the rel=attribute, i.e., change
对我来说，快速而肮脏的解决方法是简单地删除rel=属性，即更改
<link rel="stylesheet" type="text/css" href="styles.css">
to
到
<link type="text/css" href="styles.css">
Testing confirmed that the CSS file was downloaded and the styles did actually work, and that was good enough for my purposes.
测试确认已下载 CSS 文件并且样式确实有效，这对我的目的来说已经足够了。
回答by Fer Cervantes
I also removed rel = "stylesheet", and I no longer get the MIME type error, but the styles are not being loaded
我也删除了rel = "stylesheet"，我不再收到 MIME 类型错误，但没有加载样式
回答by motash
Some answers suggested removing rel="stylesheet", that didn't work out for me however.
According to the expressjs documentation: https://expressjs.com/en/starter/static-files.htmluse express.staticfunction to serve static files such as CSS, JavaScript,etc...
一些答案建议删除 rel="stylesheet"，但这对我不起作用。根据 expressjs 文档：https://expressjs.com/en/starter/static-files.html
使用express.static函数来服务静态文件，如 CSS、JavaScript 等...
app.use(express.static('public'))
and from there you should be able to load any file under the public directory
for example, if you have a style.css file inside the directory {PROJECT_PATH}/public/css/
从那里你应该能够加载 public 目录下的任何文件，例如，如果目录中有 style.css 文件 {PROJECT_PATH}/public/css/
http://localhost:3000/css/style.csswill work.
http://localhost:3000/css/style.css将工作。
回答by rags2riches
In running into the same kind of issue for a full stack web application (in development), I simply solved the problem by correctly linking the css file to the page rendered. Removing the rel = stylesheet, as suggested above, prevents the error to show up in the browser but it does not load the styles that should be applied to the page. In short, it isn't a solution.
在遇到全栈 Web 应用程序（开发中）的同类问题时，我只是通过将 css 文件正确链接到呈现的页面来解决问题。rel = stylesheet如上所述，删除可防止错误显示在浏览器中，但不会加载应应用于页面的样式。简而言之，这不是解决方案。
If you are using express-staticyou can use this as an example:
如果您正在使用，express-static您可以以此为例：
Server-side:
服务器端：
app.use(express.static(__dirname + "/public", {
index: false,
immutable: true,
cacheControl: true,
maxAge: "30d"
}));
Client-side:
客户端：
<link type="text/css" rel="stylesheet" href="/main.css">
Just add a forward slash in front of the file you wish to link to the html page (if you are rendering html pages without using any template engines) and express-static will do the rest automatically for you.
只需在您希望链接到 html 页面的文件前添加一个正斜杠（如果您正在渲染 html 页面而不使用 any template engines），express-static 会自动为您完成其余的工作。
回答by Kirankumar Gonti
This is solved my problem:
这解决了我的问题：
app.use('/public', express.static(path.join(__dirname, "public")));
回答by Ν?κο? Δημητρακ?πουλο?
What seemed to work for me was changing
似乎对我有用的东西正在改变
<script type="text/javascript" src="/lib/matrix.js"></script>
to
到
<script type="text/javascript" src="./lib/matrix.js"></script>
回答by DaveIIi
Had a similar problem with a javascript file (as opposed to css) in an Angular app. In reality, the problem wasn't with the Mime type (as the outer error message indicated) but was ultimately a "404 Not Found" error.
Angular 应用程序中的 javascript 文件（而不是 css）也有类似的问题。实际上，问题不在于 Mime 类型（如外部错误消息所示），而最终是“404 Not Found”错误。
In my case, putting the script file anywhere but in the "assets" folder resulted in the 404 and eventually the mime type error. The following tag worked for me in the head section of index.html:
就我而言，将脚本文件放在“assets”文件夹之外的任何位置会导致 404 并最终导致 mime 类型错误。以下标签在 index.html 的 head 部分对我有用：
<script src="assets/plugins/jquery.min.js" type="text/javascript"></script>
The assets folder is a sibling of the Index.html file.
assets 文件夹是 Index.html 文件的同级文件夹。
回答by sudhee
In my case I had jumbled up the code blocks below in reverse order so I was getting this error. If you have this issue, follow the below order and it might help
在我的情况下，我以相反的顺序混淆了下面的代码块，所以我收到了这个错误。如果您遇到此问题，请按照以下顺序操作，它可能会有所帮助
1.
1.
app.use(express.static(path.join(__dirname, 'public')));
2.
2.
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'public/index.html'));
});
3.
3.
app.use('/api', cors(corsOptions), indexRouter);
