CSS文件被阻止:MIME类型不匹配(X-Content-Type-Options:nosniff) [英] CSS file blocked: MIME type mismatch (X-Content-Type-Options: nosniff)

问题描述

我正在开发Angular 4应用，我想应用一些全局样式.按照教程在斜角站点，我创建了一个样式.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仍以

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"

它实际上应该以

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屋！