拒绝应用来自 'xxx/style.css' 的样式，因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型

Posted 2023-03-15

【中文标题】拒绝应用来自 \'xxx/style.css\' 的样式，因为它的 MIME 类型 (\'text/html\') 不是受支持的样式表 MIME 类型

【英文标题】：Refused to apply style from 'xxx/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type拒绝应用来自 'xxx/style.css' 的样式，因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型

【发布时间】：2021-11-29 17:29:18

【问题描述】：

我是Google App Engine 的新手，我正在尝试将我一直在本地运行的项目托管在那里。

我的 index.html 文件出现了，但它没有应用 CSS。我不完全确定 MIME 类型是什么，我也不完全确定它试图从我的代码中的哪个位置获取它。我只是假设它只会加载我在 HTML 内容中拥有的标签，并像使用 browsersync 时那样应用它。文件 index.html 通过以下方式加载：

app.get('/', (req, res) => 
  res.sendFile(path.join(__dirname, '/index.html'));
);

CSS 被加载到文件 index.html:

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

【问题讨论】：

你能在加载 css 的地方显示一些 html 吗？

编辑过的原帖

链接中不需要 type 属性。最后用 /> 关闭链接标签。即使在 html 中不是必需的，但它在 xhtml 中。

还要确保css文件不包含html标签

看起来无论您请求什么文件，包括 style.css，您的服务器都会为 index.html 提供服务。由于这是一个 html 文件，而不是 css 文件，因此浏览器会拒绝它并显示您的标题中的错误。

【参考方案1】：

当你从服务器返回样式表时，你应该将 header 的 content-type 属性设置为 text/css 即你应该有类似

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

app.get('/style', (req, res) => 
    res.setHeader('Content-Type', 'text/css');
    res.sendFile(path.join(__dirname, '/style.css'));
);

app.get('/', (req, res) => 
    res.setHeader('Content-Type', 'text/html');
    res.sendFile(path.join(__dirname, '/index.html'));
);

【参考方案2】：

永久修复：

文件server.js

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

并将所有静态资源移动到项目中的公共目录。那么你的 HTML 内容是有效的。

Source

【参考方案3】：

问题可能出在以 cmets 开头的 CSS 库。

在开发中，如果样式表以一些 cmets 开头，它可能被视为与 CSS 不同的东西。

删除库并将其放入供应商文件中，可能会解决问题。

Node.js 应用程序的另一种可能性是您应该检查您的配置。

例子：

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

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

例子：

href=”/css/style.css”>

如果您确实包含了正斜杠/public/，那么您可以直接使用href=”css/style.css”>.

确保 CSS 名称为 style.css，末尾没有第二个“s”。这也可能导致问题。