gpt4 book ai didi

CSS 文件被阻止 : MIME type mismatch (X-Content-Type-Options: nosniff)

转载 作者:技术小花猫 更新时间:2023-10-29 10:59:48 28 4
gpt4 key购买 nike

我正在开发一个 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.

但是当我访问http://localhost:4200在 Chromium 浏览器中,控制台显示错误

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"

最佳答案

我刚遇到同样的问题。这似乎是 Express 的怪癖这可能出于几个不同的原因表现出来,从网络上搜索“nodejs express css mime type”的点击次数来判断。

尽管 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 文件已下载且样式确实有效,这足以满足我的目的。

关于CSS 文件被阻止 : MIME type mismatch (X-Content-Type-Options: nosniff),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44657829/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com