CSS 文件被阻止:MIME 类型不匹配(X-Content-Type-Options: nosniff) [英] CSS file blocked: MIME type mismatch (X-Content-Type-Options: nosniff)
问题描述
我正在开发一个 Angular 4 应用程序,我想应用一些全局样式.按照 angular 站点上的教程,我创建了一个样式.css"文件在我的应用程序的根目录中,我指的是我的应用程序的 index.html 中的那个样式表:
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:
<link rel="stylesheet" type="text/css" href="styles.css">
angular 应用编译成功:
The angular app is successfully compiled:
$ 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 时,控制台在>
But when I visit http://localhost:4200 in a Chromium browser, the console shows an error at
GET http://localhost:4200/styles.css
在 Firefox 浏览器中,错误更加明确:
In a Firefox browser, the error is a bit more explicit:
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 应用程序的根目录中.我试图获得 更多信息问题:
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 :
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"
.
But I don't understand why it's bloking the request, since I've specified type="text/css"
when referencing the stylesheet.
推荐答案
我刚刚遇到了同样的问题.这似乎是 Express 的一个怪癖,从搜索的点击次数判断,它可能出于多种不同的原因而表现出来nodejs 表达 css mime 类型"的网页.
I just ran into the same issue. It appears to be a quirk of Express that can manifest itself for a few different reasons, judging by the number of hits from searching the web for "nodejs express css mime type".
尽管我们在 <link
元素中添加了 type="text/css"
属性,但 Express 将 CSS 文件返回为
Despite the type="text/css"
attribute we put in our <link
elements, Express is returning the CSS file as
Content-Type: "text/html; charset=utf-8"
而它确实应该将其返回为
whereas it really should be returning it as
Content-Type: "text/css"
对我来说,快速而肮脏的解决方法是简单地删除 rel=
属性,即更改
For me, the quick and dirty workaround was to simply remove the rel=
attribute, i.e., change
<link rel="stylesheet" type="text/css" href="styles.css">
到
<link type="text/css" href="styles.css">
测试确认已下载 CSS 文件并且样式确实有效,这对我的目的来说已经足够了.
Testing confirmed that the CSS file was downloaded and the styles did actually work, and that was good enough for my purposes.
这篇关于CSS 文件被阻止:MIME 类型不匹配(X-Content-Type-Options: nosniff)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!