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

Posted 2023-03-15

【中文标题】由于 MIME 类型而未加载样式表

【英文标题】：Stylesheet not loaded because of MIME-type

【发布时间】：2018-06-23 05:57:31

【问题描述】：

我正在开发一个使用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】：

https://github.com/froala/angular-froala/issues/170#issuecomment-386117678 找到了上面的添加解决方案

href="/">

就在 index.html 中的样式标签之前

【参考方案2】：

将 express 默认静态中间件添加为：

进口快递const express = require("express")

初始化快递const app = express() app.use(express.static(__dirname)); 那么你需要使用public directory的完整路径 例如：public directorypublic > css > style.css中的文件结构 你的路径将是 <link rel="stylesheet" type="text/css" href="./public/css/style.css"/> NOTE1: 您可以使用任何名称代替 public 即 assets myassets any other NOTE2:您的服务器应该在主目录中损坏 如果您的服务器在子目录中损坏 然后你可以通过使用../出来

【参考方案3】：

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

<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 文件。

【参考方案4】：

除了使用：

<base href="/">

从您的 CSS 链接中删除 rel="stylesheet" 部分：

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

【讨论】：

删除rel 修复了它，但问题是为什么？

它消除了错误，但它不应用样式表

【参考方案5】：

还请检查您的文件名中的拼写错误。发生在我身上：

style.css.css

【参考方案6】：

我也遇到了同样的问题：这里是解决方案，不要在 .html 文件中的 css 链接路径中写入 public。尽管您的 .css 文件存在于公用文件夹中。

示例：- js文件

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

html 文件

使用这个

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

而不是

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

【参考方案7】：

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

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

到这里：

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

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

【讨论】：

虽然它也对我有用，但这是一个有效的属性吗？

@sr9yar 你是对的，根据validator.w3.org，在链接中包含 src 是无效的，所以它作为一个快速修复程序很好，但只要你有更多的时间，我建议找到另一个更有效的解决方法。

【参考方案8】：

每个 cmets 都没有帮助我，解决方案是修复路线，因为我从主页找到了文件，但是当我导航它时它消失了，正确的解决方案是把这些东西放在好位置

【参考方案9】：

我是如何解决这个问题的。 对于 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'));

【参考方案10】：

我想分享一些关于这个主题的想法，当我放置 app.use(expres.static('../frontEnd/public')) 时它不起作用，但是当我使用 app.use(express .static('/frontEnd/public')) 它工作正常，我希望这会对某人有所帮助

【讨论】：

请查看formatting help page 以改进您的格式。

【参考方案11】：

这是 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")));

【参考方案12】：

在我的 angular-ionic 项目中，我有一个这样的 css 条目，用于仅在我请求时才加载的组件。

 .searchBar 
    // --placeholder-color: white;
    // --color: white;
    // --icon-color: white;
    // --border-radius: 20px;
    // --background: color:rgba(73,76,67,1.0);
    // --placeholder-opacity: 100%;
    // background-color: red;
  

只要我注释掉 css 类条目中的所有值，它就会再次开始工作。

我认为这是因为将这些属性 background-color 和 --background 放在一起。

【参考方案13】：

我在我的 XAMPP 中使用了虚拟域并遇到了这个问题。因此，当我检查 httpd-vshosts.conf 文件时，我明确指出了 index.php 文件，这导致了问题。

所以我改变了这个：

<VirtualHost *:80>
    DocumentRoot "C:/xampp/htdocs/cv/index.php"
    ServerName cv.dv
</VirtualHost>

到此：

<VirtualHost *:80>
    DocumentRoot "C:/xampp/htdocs/cv/"
    ServerName cv.dv
</VirtualHost>

然后文件加载没有问题。

【参考方案14】：

在我的情况下，问题在更改 .scss 文件中的随机值后就解决了。重新加载后问题消失了，样式开始加载良好。简单，但有效：P

【讨论】：

你在 scss 文件中指的是哪个随机值？

@Subbu 在我的情况下没有任何特殊价值。我更改了在打开的 .scss 文件中找到的第一个值。对不起，如果不能更好地帮助你

好的，感谢您的回复 :)

【参考方案15】：

通过进入我的浏览器控制台 > 网络 > 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 链接指向的位置。

【参考方案16】：

我在 select2 中遇到了这个挑战。在我下载了最新版本的库并替换了项目中的库（css 和 js 文件）后，它就解决了。

【参考方案17】：

我也遇到了同样的问题。

I change my directories' permission to "755" now all the files are loading.

你也可以试试我的回答。我希望这对你有用。如果答案对您有用，请不要犹豫，为答案投票。 祝你好运。

【参考方案18】：

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

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

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

【讨论】：

当然，如果文件不在所需的目录或命名不同，那么你就会导致这个问题

【参考方案19】：

我几乎尝试了所有给定的解决方案，对我来说问题是我在 IIS 中没有 MIME types option，也就是说我缺少这个 Windows 功能。

solution 对我来说是：

“如果您使用的是 Windows 8 或 10 等非服务器操作系统，请在开始页面上搜索“打开或关闭 Windows 功能”并启用： Internet 信息服务 -> 万维网服务 -> 通用 HTTP 功能 -> 静态内容"

启用 IIS 静态内容

【讨论】：

这个对我来说已解决的问题。谢谢。

【参考方案20】：

就我而言，我必须确保链接是相对的，并且 rel 属性位于 href 属性之后：

<link href="/assets/styles/iframe.css" rel="stylesheet">

【参考方案21】：

如果您正在使用 Node 应用程序，请确保 \public 文件夹位于根文件夹的正下方，而不是位于 views 文件夹中。这可能会变得很麻烦。将\public 移动到根目录下，然后重新启动服务器并见证更改。

【参考方案22】：

我遇到了类似的错误，发现错误是在 style.css 链接 href 的末尾添加“/”。

将<link rel="stylesheet" href="style.css/"> 替换为<link rel="stylesheet" href="style.css"> 解决了该问题。

【参考方案23】：

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

import 'path/to/stylesheet.css';

【参考方案24】：

您必须已导入多个样式表。尝试删除一个并重试

【参考方案25】：

如果浏览器找不到相关的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 中的导入方法。

【参考方案26】：

就我而言，这是Grunt 运行的任务的执行顺序。

它正在执行任务connect 设置本地服务器并在执行转换样式的less 和postcss 之前自动在新选项卡中打开应用程序。

基本上，我改变了这个：

grunt.registerTask('default', 'Start server. Process styles.', ['connect', 'less', 'postcss']);

到这里：

grunt.registerTask('default', 'Process styles. Start server.', ['less', 'postcss', 'connect']);

它奏效了！希望它也可以帮助其他人。

【参考方案27】：

如果您使用没有 JS 的 Express，请尝试：

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

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

【参考方案28】：

此错误的另一个原因可能是 CSS 文件权限不正确。在我的情况下，该文件无法访问，因为所有权已更改为 root 用户——这是由于以 root 用户身份推送 Git 文件而发生的。

【参考方案29】：

检查您是否启用或禁用了压缩。如果您使用它或有人启用它，那么app.use(express.static(xxx)) 将无济于事。确保您的服务器允许压缩。

当我将 Brotli 和 Compression Plugins 添加到我的 Webpack 时，我开始看到类似的错误。那么你的服务器也需要支持这种类型的内容压缩。

如果您使用 Express，那么以下内容应该会有所帮助：

app.use(url, expressStaticGzip(dir, gzipOptions)

模块被调用：express-static-gzip

我的设置是：

const gzipOptions = 
  enableBrotli: true,
  customCompressions: [
  encodingName: 'deflate',
  fileExtension: 'zz'
 ],
 orderPreference: ['br']

【参考方案30】：

我遇到了这个问题，在向 Azure B2C 用户流添加自定义外观时遇到了同样的问题。我发现 html 页面引用的根目录是 ../oauth/v2 （即 oauth 服务器路径），而不是我的存储设备的路径。

输入页面的完整网址为我解决了这个问题。