由于 MIME 类型而未加载样式表

Posted

技术标签:

【中文标题】由于 MIME 类型而未加载样式表【英文标题】:Stylesheet not loaded because of MIME-type 【发布时间】:2021-04-03 01:15:34 【问题描述】:

我正在开发一个使用gulp 编译和浏览器同步的网站,以使浏览器与我的更改保持同步。

gulp 任务可以正确编译所有内容,但是在网站上,我看不到任何样式,并且控制台显示此错误消息:

拒绝应用样式来自 'http://localhost:3000/assets/styles/custom-style.css' 因为它 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型,并且 已启用严格的 MIME 检查。

现在,我真的不明白为什么会发生这种情况。

HTML 包含这样的文件(我很确定这是正确的):

<link rel="stylesheet" type="text/css" href="assets/styles/custom-style.css"/>

样式表现在是 Bootstrap 和 font-awesome 样式之间的合并(还没有自定义)。

路径也是正确的,因为这是文件夹结构:

index.html
assets
|-styles
  |-custom-style.css

但我不断收到错误消息。

可能是什么?这可能是 gulp/browsersync 的东西(可能是设置?)?

【问题讨论】:

当我的链接样式表以 html 当您为文件设置了不正确的 URL 或服务器配置不正确时,就会发生这种情况。结果,浏览器没有获得样式表,但它获得了一些带有 404 状态和“Content-Type”标头的 HTML。由于浏览器从服务器获取了一些东西,它不会告诉你没有回复,而是告诉你文件的 MIME 类型不正确。检查它的最快方法是尝试在新选项卡中直接打开文件http://localhost:3000/assets/styles/custom-style.css 对我来说就是 RussCoder 描述的情况。这背后的原因是我使用了 Angular 并忘记在 angular.json 中的样式包装中添加一个 css 文件。所以在构建应用程序时它被忽略了。 我可以通过 spring 安全配置来解决这个问题。它阻止了对资源文件夹的访问。 错误的proxy.conf.json 设置导致我们出现这个奇怪的错误,因为转发到后端 API 的请求无法正常工作,因此 HTML 错误响应。 【参考方案1】:

对于 Node.js 应用程序,请检查您的配置:

app.use(express.static(__dirname + '/public'));

请注意,/public 末尾没有正斜杠,因此您需要将其包含在 HTML 的 href 选项中:

href="/css/style.css">

如果您确实包含正斜杠 (/public/),那么您可以直接使用 href="css/style.css"

【讨论】:

href="/assets/style.css"> 在我的情况下解决了这个问题! 没有“/”我可以在带有 url 的页面中加载 css;本地主机:3000/api/用户。但是当我有一个添加变量的链接(.../users?id=5397538945734)时,它会给出错误。当我在 css 链接中添加斜杠时,它可以工作。多么奇怪!?【参考方案2】:

我认为问题在于以 cmets 开头的 CSS 库。

在开发过程中,我不会缩小文件,也不会删除 cmets。这意味着样式表以一些 cmets 开头,导致它被视为与 CSS 不同的东西。

删除库并将其放入供应商文件(始终在没有 cmets 的情况下缩小)解决了该问题。

同样,我不能 100% 确定这是一个修复,但它仍然是我的胜利,因为它现在按预期工作。

【讨论】:

解决了一半,因为如果您不想将所有这些 css 放在 vendor 中,您应该怎么做?每次测试应用程序时都最小化 node_modules?呵呵……你有没有找到一些东西来编译某个模块? 在我的编译过程中,供应商文件仅在构建时创建,然后我只关注我实际正在处理的文件的更改(通常不会进入供应商)。这意味着第一次构建有点慢,但是我只是编译我的文件而不进行缩小,这不会减慢我的进程 我遇到了同样的问题,发现我试图将服务器上存在的文件的缩小版本作为非缩小文件加载。所以,当服务器上的文件是“custom-style.css”时,我试图加载“custom-style.min.css”。更改链接以加载正确的资源后,一切正常。 问题不仅限于 CSS。我还在一个 JS 文件上得到了 404,这是由第一行中的注释引起的。 我的情况没有出现错误。这对我有用。谢谢。【参考方案3】:

当您没有正确引用您的 CSS 文件时,也会出现此错误。

例如,如果你的链接标签是

<link rel="stylesheet" href="styles.css">

但您的 CSS 文件名为 style.css(没有第二个 s),那么您很有可能会看到此错误。

【讨论】:

正是发生在我身上的事情。我在这里尝试了每个答案(更改 mimetype,删除 CSS cmets,更改 node.js 配置......)。我所要做的就是修正 CSS 名称中的一个错字。哇! 要添加到这个答案,请确保 gulp 确实找到了 css 文件并将其通过管道传输到您的 dist。每当我收到此错误时,都是因为我以某种方式搞砸了 css 文件的路径,它只是在构建目录中不存在。 是的,对我来说也是一样,一个简单而愚蠢的错字。我认为服务器发送一个 404 响应页面是做什么的,所以你的浏览器得到那个 404 页面并告诉你它不是正确的 css ......这是真的。 FWIW,当 Sharepoint 权限导致访问被拒绝时,我也遇到了同样的问题。我必须将经过身份验证的用户添加到 SP 站点。一如既往,感谢 Stack Overflow 社区为我指明了正确的方向。干杯! ? 就我而言,我没有将 style.css 上传到服务器。呵呵..【参考方案4】:

在大多数情况下,这可能只是 CSS 文件路径错误。所以 Web 服务器返回 status: 404 和一些 Not Found 内容负载 html 类型。

浏览器从&lt;link rel="stylesheet" ...&gt; 标记遵循这条(错误的)路径,目的是应用CSS 样式。但是返回的内容类型矛盾,因此会记录错误。

【讨论】:

我的问题是路径无效。但是,这个糟糕的路径是由于我的 Angular 项目的基本 href 设置不正确造成的。如果其他人在更新您的基本 href 后开始看到此错误,则可能是原因。 感谢您不厌其烦地完整清楚地记录 CSS 文件上的 404 错误如何产生这个(最初)令人费解的错误消息 另一种故障排除方法,将出现此错误的网址粘贴到另一个选项卡中,如果您没有看到 CSS,则可能是问题【参考方案5】:

Bootstrap 模板出现此错误。

<link href="starter-template.css" rel="stylesheet">

然后我从链接中删除了rel="stylesheet",即:

<link href="starter-template.css">

一切正常。如果您使用的是 Bootstrap 模板,请尝试此操作。

【讨论】:

根据Living Standard (4.2.4),“链接元素必须具有rel 属性或itemprop 属性,但不能同时具有两者。” 因此,删除rel 属性只是删除了包含样式表的功能。【参考方案6】:

我已将我的href 更改为src。所以从这里:

<link rel="stylesheet" href="dist/photoswipe.css">

到这里:

<link rel="stylesheet" src="dist/photoswipe.css">

成功了。我不知道为什么,但它确实起到了作用。

【讨论】:

虽然它也对我有用,但这是一个有效的属性吗? @sr9yar 你是对的,根据validator.w3.org,在链接中包含 src 是无效的,所以它作为一个快速修复程序很好,但只要你有更多的时间,我建议找到另一个更有效的解决方法。【参考方案7】:

根据 Angular 结构在 style.css 文件的下方/上方创建一个文件夹,并提供类似 &lt;link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"&gt; 的链接。

【讨论】:

为什么会这样?错误指出“text/html”不是受支持的 MIME 类型。 在我的情况下,错误消失了,但是没有应用 css 样式.. :/ 我确实花了更多时间阅读有关此问题的信息,并将 css 文件的类型更改为其他可能会导致严重问题,例如 css 被服务器读取为 html 在 AngularDart 中,index.html 的根目录是“web”文件夹,而不是项目主文件夹。所以所有的 css 文件都必须在 web 文件夹中。像这样“[projectfolder]\web[yourcssfileshere]”。因此,如果您尝试导入位于 web 文件夹之外的 css 文件,它将找不到。【参考方案8】:

您文件中的评论会导致此问题。 一些缩小器不会删除 cmets。

如果您使用Node.js 并使用express 设置静态文件,例如:

app.use(express.static(__dirname + '/public'));

您需要正确处理文件。

在我的情况下,两者都是问题,所以我在我的 CSS 链接前加上“/css/styles.css”。

例子:

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

这个解决方案非常完美,因为路径是 CSS 无法渲染的主要问题

【讨论】:

【参考方案9】:

除了使用:

<base href="/">

从您的 css 链接中删除 rel="stylesheet" 部分:

<link type="text/css" href="assets/styles/custom-style.css"/>

【讨论】:

删除rel 修复了它,但问题是为什么? 它消除了错误,但它不应用样式表 删除属性 rel 对我有用。我正在使用 Angular。【参考方案10】:

我只是在 angular.json 的 Angular 6 构建配置的 styles 部分中引用了 CSS 文件(在我的例子中是一个 Angular 主题):

这并不能回答问题,但它可能是一个合适的解决方法,就像对我一样。

【讨论】:

这是 Angular-CLI 6 项目的正确答案【参考方案11】:

我知道这可能与上下文无关,但链接一个不存在的文件可能会导致这个问题,就像我之前发生的那样。

<!-- bootstrap grid -->
<link rel="stylesheet" href="./css/bootstrap-grid.css" />

如果此文件不存在,您将面临该问题。

【讨论】:

当然,如果文件不在所需的目录或命名不同,那么你就会导致这个问题【参考方案12】:

正如本文中提到的解决方案,一些解决方案对我有用,但 CSS 不适用于页面。

简单地说,我只是将“css”目录移动到“Assest/”目录中,一切正常。

<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/site.css" >

【讨论】:

【参考方案13】:

对于使用 Angular-CLI 并发布到网络服务器上的子文件夹的其他人,请查看以下答案:

当您部署到域中的非根路径时,您需要手动更新 dist/index.html. 中的 &lt;base href="/"&gt; 标记

在这种情况下,您需要更新到&lt;base href="/sub-folder/"&gt;

https://github.com/angular/angular-cli/issues/1080

【讨论】:

【参考方案14】:

问题是,如果你有一个相对路径,并且你导航到一个嵌套页面,那将解析到错误的路径:

<link rel="stylesheet" href='./index.css'>

所以简单的解决方案是删除.,因为我的是single-page application。

像这样:

<link rel="stylesheet" href='/index.css'>

所以它总是解析为/index.css

这个问题有很多答案,但似乎没有一个真正有效。如果您删除 rel="stylesheet",它将停止错误但不会应用样式表。

真正的解决方案:

只需删除 . 就可以了

【讨论】:

是的,就我而言,我忘记从我的 index.html 文件中删除这些相对路径,并且在生产模式下运行 webpack。不需要这些路径,因为 webpack 通过 webpack.prod.js 动态链接 css 文件。【参考方案15】:

当我将一个网站移动到 localhost 和 phpStorm 时,我知道在网上工作的网站遇到了这个问题。

这在网上很好用:

    <link rel="stylesheet" href="/css/additional.css">

但是对于 localhost 我需要去掉斜线:

    <link rel="stylesheet" href="css/additional.css">

因此,我已经在此补充了一些已提供的答案 - 这可能是路径或拼写错误,而不是任何复杂的服务器设置问题。控制台中的错误是红鲱鱼;首先需要检查网络选项卡的 404。

在此处提供的答案中有一些不正确的解决方案。添加type="text/html" 或将href 更改为src 不是答案。

如果您想拥有所有属性以便在最挑剔的验证器和您的 IDE 上进行验证,则应提供媒体值,rel 应为 stylesheet,例如:

    <link rel="stylesheet" href="css/additional.css" type="text/css" media="all">

【讨论】:

【参考方案16】:

我遇到了同样的问题,然后我检查了我写的:

&lt;base href="./"&gt; in index.html

然后我改成

<base href="/">

然后它运行良好。

【讨论】:

【参考方案17】:

我也遇到了同样的问题。

如果你的项目结构如下树:

index.html
assets
|-styles
  |-custom-style.css
server
  |- server.js

我建议在server.js 中添加以下代码:

var path = require('path')
var express = require('express')
var app = express()

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

注意: Path 是 Node.js 内置的模块,所以不需要通过 npm 安装这个包。

【讨论】:

【参考方案18】:

您可以打开谷歌浏览器工具,选择网络选项卡,重新加载您的页面并找到 CSS 的文件请求并查找文件中的内容。

您在合并文件中的两个库时可能做错了什么,包括一些不适合 CSS 的字符或标题?

【讨论】:

不幸的是,我确实尝试过,但它并没有真正的帮助,请求立即失败,它只有请求 url(这是正确的)【参考方案19】:

除了一长串答案之外,这个问题也发生在我身上,因为从浏览器同步的角度来看,我没有意识到路径是错误的。

鉴于这个简单的文件夹结构:

package.json
app
  |-index.html
  |-styles
      |-style.css

index.html&lt;link&gt; 内的 href 属性必须是 app/styles/style.css 而不是 styles/style.css

【讨论】:

确实,只是路径中的一个错字给了我同样的错误。 哇,这对我有用,非常感谢。我真的要放弃了【参考方案20】:

如果您使用没有 JS 的 Express,请尝试:

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

例如,我的 CSS 文件位于 public/stylesheets/app.css

【讨论】:

【参考方案21】:

我是如何解决这个问题的。 对于 Node.js 应用程序,您需要设置 **public** 文件夹配置。

// Express js
app.use(express.static(__dirname + '/public'));

否则,你需要像href="public/css/style.css".那样做

<link href="public/assets/css/custom.css">
<script src="public/assets/js/scripts.js"></script>

注意:它适用于http://localhost:3000/public/assets/css/custom.css。但构建后无法工作。您需要为 Express 设置app.use(express.static(__dirname + '/public'));

【讨论】:

【参考方案22】:

对于 Node.js 应用程序,只需在服务器文件中导入所有必需的模块后使用它:

app.use(express.static("."));
express.static 内置中间件函数,在你的 .html 文件中:link rel="stylesheet" href="style.css">

【讨论】:

您真的不想向公众提供服务器代码吗?【参考方案23】:

通过进入我的浏览器控制台 > 网络 > style.css ...单击它并显示“无法获取 /path/to/my/CSS”,这告诉我我的链接错误。 我将其更改为我的 CSS 文件的路径。

更改前的原始路径为 localhost:3000/Example/public/style.css 将其更改为 localhost:3000/style.css 即可解决。

如果您从 app.use(express.static(path.join(__dirname, "public"))) 提供文件;或 app.use(express.static("public"));您的服务器会将“那个文件夹”传递给浏览器,因此在浏览器中添加“/yourCssName.css”链接即可解决问题

通过在浏览器 CSS 链接中添加其他路由,您将告诉浏览器在指定的路由中搜索 css。

总之...检查您的浏览器 CSS 链接指向的位置。

【讨论】:

【参考方案24】:

我正在使用React.js 应用程序,也遇到了这个错误,导致我来到这里。这对我有帮助。我没有将&lt;link&gt; 添加到index.html,而是在我需要使用此样式表的组件中添加了import

import 'path/to/stylesheet.css';

【讨论】:

【参考方案25】:

这是 Typescript+Express 特有的

我 ctrl+f'd "Typescript" 和 ".ts" 并在这些答案中一无所获,所以我将在这里添加我的解决方案,因为它是由(我对 typescript 的经验不足)引起的,而我的解决方案是已阅读未明确解决此特定问题。

问题是 Typescript 正在将我的 app.ts 文件编译成我项目的 dist 目录中的 javascript 文件 dist/app.js

这是我的目录结构,看看你能不能发现问题:

├── app.ts
├── dist
│   ├── app.js
│   ├── app.js.map
│   └── js
│       ├── dbclient.js
│       ├── dbclient.js.map
│       ├── mutators.js
│       └── mutators.js.map
├── public
│   ├── css
│   │   └── styles.css
├── tsconfig.json
├── tslint.json
└── views
    ├── index.hbs
    └── results.hbs

我的问题是,在 app.ts 中,我告诉 express 将我的公共目录设置为 /public,如果 Node 实际上正在运行 Typescript,这将是一个有效路径。但是 Node 正在运行编译后的 javascript,app.js,它位于 dist 目录中。

所以app.ts 假装 dist/app.js 解决了我的问题。因此,我通过更改解决了app.ts 中的问题

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

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

【讨论】:

【参考方案26】:

删除 rel="stylesheet" 并添加 type="text/html"。所以它看起来像这样 -

<link  href="styles.css" type="text/html" />

【讨论】:

【参考方案27】:

在我的情况下,当我实时部署包时,我将它从公共 HTML 文件夹中取出。这是有原因的。

但显然已经激活了严格的 MIME 类型检查,我不太确定它是在我身边还是在我托管的公司。

但是,当我将样式文件夹移动到与 index.php 文件相同的目录中时,我就停止了错误,并且样式被完美地激活了。

【讨论】:

【参考方案28】:

如果您将 JavaScript 中的样式设置为:

    var cssLink = document.createElement("link");
    cssLink.href = "./content.component.scss";
    cssLink.rel = "stylesheet";
   --> cssLink.type = "html/css";
    (iframe as HTMLIFrameElement).contentDocument.head.appendChild(cssLink);

然后只需将 cssLint.type(上面描述中的箭头表示)更改为“MIME”:

   cssLink.type = "MIME";

它将帮助您摆脱错误。

【讨论】:

【参考方案29】:

引导样式未加载 #3411

https://github.com/angular/angular-cli/issues/3411

    我安装了 Bootstrap v. 3.3.7

    npm install bootstrap --save
    

    然后我将需要的脚本文件添加到 angular-cli.json 文件中的apps[0].scripts

    "scripts": [
        "../node_modules/bootstrap/dist/js/bootstrap.js"
    ],
    
    // And the Bootstrap CSS to the apps[0].styles array
    
    "styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.css"
    ],
    

    我重新启动了 ng serve

它对我有用。

【讨论】:

【参考方案30】:

如果浏览器找不到相关的css文件,可能会报这个错误。

如果您使用 Angular 应用程序,则不必将 css 文件路径放在 index.html 上

 <link href="xxx.css" rel="stylesheet"> -->

您可以将相关的css文件路径放在styles.css文件中。

@import "../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";

【讨论】:

这对我来说是修复,从 index.html 中删除链接 href 并使用 styles.scss 中的导入方法。

以上是关于由于 MIME 类型而未加载样式表的主要内容,如果未能解决你的问题,请参考以下文章

“样式表未加载,因为它的 MIME 类型“text/html”不是“text/css”[关闭]

Spring MVC:样式表未加载,因为它的 MIME 类型“text/html”不是“text/css”

Wordpress 资源解释为样式表,但使用 mime 类型 text/html 传输

CSS、.htaccess、资源解释为样式表,但使用 MIME 类型 text/html 传输

Springboot - 资源解释为样式表,但使用 MIME 类型 text/html 传输

拒绝应用样式,因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型