新手上路，请多包涵

我正在使用 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" 吗？如果不是，我需要在我的服务器文件中放入什么来解决这个问题？

原文由 isabelringing 发布，翻译遵循 CC BY-SA 4.0 许可协议

javascript html css express static

阅读 956

2 个回答

得票最新

社区维基

发布于
2022-12-15

✓ 已被采纳

发生 MIME 类型错误是因为提供的文件可能是 Express 制作的“404 未找到”页面，因为它找不到 CSS 文件。浏览器需要一个 CSS 文件，得到一个 HTML 文件并说 MIME 类型不适合。

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

意味着静态文件是从字面上提供的 /static 。在基于 Unix 的操作系统中，这是根目录 / 的直接子目录。我不认为你这样做，但你不应该存储文件，更不用说该目录中的可公开访问的文件了。相反，您可能正在寻找的是应用程序目录中的 static 目录。

这就是你如何告诉 express 使用那个服务器文件的方法：

 app.use(express.static(__dirname + "/static"));

如果你不能在你的 HTML 中包含一个文件，那么总是双重检查，或者更好的是三重检查，该文件可以首先通过浏览器访问。

此外，文件位于 ... href="/..." ，而不是 ... href="/static/..."

原文由 Luca Kiebel 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基

发布于
2022-12-15

我知道这个问题很老，但我想用一个简单的例子来补充我的两分钱，因为我花了一段时间才弄清楚这个问题。

工作示例：

我的文件位于 /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 。

原文由 Noah Thomas 发布，翻译遵循 CC BY-SA 4.0 许可协议

查看全部 2 个回答

推荐问题

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

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

git提交记录问题？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

怎么获取动态弹出对话框的模拟单击？

如何实现类似豆包的AI改写框跟随内容滚动效果？

Stack Overflow 翻译