本地 CSS 或 JS 的 MIME 类型错误阻止在使用 NodeJ 时加载自定义样式
Posted
技术标签:
【中文标题】本地 CSS 或 JS 的 MIME 类型错误阻止在使用 NodeJ 时加载自定义样式【英文标题】：MIME type error for local CSS or JS prevents loading custom styles when working with NodeJs 【发布时间】：2021-02-19 23:06:54 【问题描述】：我整个星期都在为这个错误绞尽脑汁！ 我的计划是创建一个简单的'从 nodejs' 应用程序发送电子邮件。我遇到的问题是我的 style.css 的 mime-type 错误。该错误表明它采用 text/html 格式。 我像往常一样从“npm init -y”和“npm install express nodemailer nodemailer-mailgun-transport -S”开始。 我还创建了一个“server.js”、“index.html”和“style.css”（参见下面的代码）。 就是这样。该应用程序按预期工作，并且链接引导 cdn 也可以工作。只有我的自定义 CSS 让我很难过。所以为了简化它，我什至从w3schools复制/粘贴了一个html模板
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
style.css
body
background-color: powderblue;
h1
color: blue;
p
color: red;
server.js
const express = require('express');
const app = express();
const PORT = 8080;
const path = require('path');
app.get('/', (req, res) =>
res.sendFile(path.join(__dirname, 'views', 'index.html'));
)
app.listen(PORT);
package.json
"name": "SendMail",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts":
"test": "echo \"Error: no test specified\" && exit 1"
,
"keywords": [],
"author": "",
"license": "ISC",
"dependencies":
"express": "^4.17.1",
"nodemailer": "^6.4.15",
"nodemailer-mailgun-transport": "^2.0.1"
,
"style": "style.css"
Chrome 中的错误：
我尝试过的：
隔离 html/css 部分以确保代码正常。是的！ 正在试验样式链接。包括此解决方法：https://***.com/a/45119502/12272930 通过 javascript 更改 mime 类型，例如：Style and javascript files not applied to page that is serving HTML in Node.js 如上所示在 package.json 中附加样式部分编辑：内联样式和 JS 按预期工作。我猜这和快递有关。
还有什么我可以尝试的吗？ 如果您需要更多信息，请告诉我。提前致谢！
【问题讨论】：
【参考方案1】：在提供静态文件（如图像、css 等）时，通常最佳做法是将这些文件放在名为 public 或 static 的专用目录中，或任何您喜欢的目录中。然后，您需要明确告诉您的快速应用程序从那里提供文件，如下所示：
app.use(express.static(__dirname + '/public'));
所以你的 server.js 变成了：
const express = require('express');
const app = express();
const PORT = 8080;
const path = require('path');
app.use(express.static(__dirname + '/public'));
app.get('/', (req, res) =>
res.sendFile(path.join(__dirname, 'views', 'index.html'));
)
app.listen(PORT);
然后你可以在 index.html 中像这样调用你的 CSS 文件：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="public/style.css" />
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
【讨论】：
哦，从你的 package.json 中删除 "style": "style.css"。 谢谢！但不幸的是，错误仍然存在。我按照您的指示仔细检查了所有内容。您是否设法让代码使用此更正？ 我也尝试添加 path.join() 来组合 __dirname 和 '/public' 是的，它对我有用。您是否在其他浏览器中尝试过？我在 Mac 和 Safari 中测试过，没问题 是的。我尝试了 Firefox 和 Chrome。好的。因此，我设法通过 vscode express 插件启动服务器来使样式表正常工作。所有其他功能都不起作用。所以我需要用命令'node server.js'启动它才能让它正常工作。你知道这里有什么不同吗？【参考方案2】：晚上好）只要让你的 html/css 文件夹是公开的。
const express = require('express');
const app = express();
const PORT = 3000;
const path = require('path');
app.use(express.static(__dirname + '/public'));
app.get('/', (req, res) =>
res.sendFile(path.join(__dirname, 'views', 'index.html'));
)
app.listen(PORT);
【讨论】：
以上是关于本地 CSS 或 JS 的 MIME 类型错误阻止在使用 NodeJ 时加载自定义样式的主要内容，如果未能解决你的问题，请参考以下文章
CSS/JS 在 HTML 中不起作用，错误：MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型
将外部 js 添加到 Vue CLI 时出现 Mime 类型错误
错误：由于 MIME 类型（“text/html”）不匹配而被阻止（X-Content-Type-Options: nosniff）