express.static 和 CSS 文件的 MIME 类型错误
Posted
技术标签:
【中文标题】express.static 和 CSS 文件的 MIME 类型错误【英文标题】：MIME type error with express.static and CSS files 【发布时间】：2018-10-15 08:44:37 【问题描述】：我正在使用 Express 和 NodeJS。在我的server.js 文件中，我有这段代码：
app.use(express.static('/static'));
随后在我的静态目录中，我有一个 CSS 文件夹，然后是一个 style.css 文件。在我的index.html 中，我像这样链接到工作表：
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
但是，在我的测试环境中，我继续收到此错误：
拒绝应用来自 'http://localhost:3500/static/css/style.css' 的样式，因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查.
我确定我的标签中的路径名是正确的，但我对为什么会收到此错误感到困惑。
我是否需要声明将 CSS 文件作为 CSS 而不是 HTML 处理？当我说type="text/CSS" 时，我不是在这样做吗？如果没有，我需要在我的服务器文件中添加什么来解决这个问题？
【问题讨论】：
【参考方案1】：app.use(express.static('/static'));
表示静态文件是从/static 直接提供的。在基于 Unix 的操作系统中，这是目录根 / 的直接子级。我不认为你这样做，但你不应该存储文件，更不用说该目录中可公开访问的文件了。相反，您可能正在寻找的是应用程序目录中的 static 目录。
这就是你告诉 express 使用那个服务器文件的方法：
app.use(express.static(__dirname + "/static"));
发生 MIME 类型错误是因为所提供的文件可能是 Express 制作的“404 Not Found”页面，因为它找不到 CSS 文件。浏览器需要一个 CSS 文件，得到一个 HTML 文件并说 MIME 类型不适合。
如果你不能在你的 HTML 中包含一个文件总是双重检查，或者更好的三重检查，那么该文件可以首先通过浏览器访问。
此外，文件位于... href="/..."，而不是... href="/static/..."
【讨论】：
如果您希望文件位于 URL/static/.. 而不是 /.. 中，请改用 app.use("/static", express.static(__dirname + "/static"));。
“发生 MIME 类型错误，因为提供的文件可能是“404 未找到”页面”——这让我大开眼界！我被这个错误蒙蔽了双眼，以至于我没有意识到问题实际上是完全不同的。【参考方案2】：
我有同样的错误，但它是由一个不匹配的情况引起的。我在我的 HTML 文件中写道：
<script src = "./myScript.js"></script>
但实际文件名是MYSCRIPT.js。我没有注意到，因为当我在本地打开 HTML 文件时，浏览器似乎会忽略这一点，甚至会导入大小写不匹配的文件。
【讨论】：
【参考方案3】：正如其他发帖者所说，这很少是“实际”的 MIME 类型问题。
通常它是定义错误的公共/静态文件配置和不受欢迎的文件的组合。
回答
示例文件结构
// file structure
public/
assets/
css/
stylesheet.css
images/
avater.jpeg
js/
main.js
controllers/
user
createUser.js
readUser.js
models/
User.js
index.js
views/
layouts/
main.handlebars
homepage.handlebars
server.js
app.js
/public 文件的基本服务
来自 Express 文档：https://expressjs.com/en/starter/static-files.html
app.use(express.static('public'))
这只有在我们的服务器位于文件系统的根目录时才有效，这对于服务器来说是可以的——对于其他任何东西，都不是。
到 /public 的动态链接
app.use(express.static(__dirname + '/public'))
这将从节点应用程序的目录名称构建公共路径。
它将允许我们将项目文件夹放置在驱动器上的任何位置，而不会妨碍运行时。
使用来自 /public 的文件
// homepage.handlebars
<section>
</section>
<script src="/js/main.js"></script>
上述 Express 文档中提供了说明。
// Sample of file paths created by public/
http://localhost:3000/js/main.js
这意味着当我们链接到该文件时，我们只需将/ 前缀添加到我们的文件/文件夹中。
【讨论】：
【参考方案4】：我知道这个问题很老了，但想用一个简单的例子来补充我的两分钱，因为我花了一段时间才弄清楚这个问题。
工作示例：
我的文件位于/usr/noah下
/usr/noah/index.js
const express = require('express')
const path = require('path')
const app = express()
const port = 8080
app.use(express.static(__dirname + '/static'));
app.get('/', (req, res) =>
res.sendFile(path.join(__dirname, 'static/index.html'))
);
app.listen(port, () =>
console.log('Listening on port: ' + port)
);
/usr/noah/static/index.html
<html>
<head>
<link rel='stylesheet' href='style.css' type='text/css'>
</head>
<body>
<div id='main'>
<h1>Hello World</h1>
</div>
</body>
</html>
/usr/noah/static/style.css
#main
margin: 3em;
padding: 1em;
border: 1px solid gray;
border-radius: 10px;
h1
color: blue;
然后我使用以下命令从/usr/noah 运行它：
node index.js
解释
我倾向于在示例方面做得更好，所以就在上面。要解释出了什么问题，请参见下文：
app.use(express.static('public'))
这在许多快速文档中使用。它就像 alanionita 提到的那样工作得很好，只有当您的服务器位于文件系统的根目录时。如您所知，我在/usr/noah 有两层深。
将此更改为工作示例app.use 确保您的文件从正确的目录提供，在本例中为/usr/noah/static。
【讨论】：
以上是关于express.static 和 CSS 文件的 MIME 类型错误的主要内容，如果未能解决你的问题，请参考以下文章