express.static 和 CSS 文件的 MIME 类型错误答案

【问题标题】：MIME type error with express.static and CSS filesexpress.static 和 CSS 文件的 MIME 类型错误
【发布时间】：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" 时，我不是在这样做吗？如果没有，我需要在我的服务器文件中添加什么来解决这个问题？

【问题讨论】：

标签： javascript html css express static

【解决方案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。

【讨论】：