javascript - 不支持获取 MIME 类型

Question

我有一个非常奇怪的问题，但是，我已经解决了它，但想知道为什么。我正在使用 node.js 和 express。
在我的 server.js 文件中，我编写了如下路由代码:

app.get('/eventname/:event', (req, res) => {
res.render('event.hbs', {
    name: req.user.displayName
});
})

当我尝试加载页面时没有特定的“事件名称”路由，它加载成功只是它没有加载我的 .css 文件给出不支持 MIME 类型 错误。但是，当我删除“事件名称”

app.get('/:event', (req, res) => {
res.render('event.hbs', {
    name: req.user.displayName
});
})

一切开始正常运行。为什么会这样，我是不是做错了什么？

Answer 1

我不是 100% 确定，但我很确定会发生这种情况，因为 <link>用于导入 CSS 文件的标记使用相对路径。

---

让我们想象它看起来像这样......

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

... 您正在访问的事件页面的 URL 是 https://example.com/example-event .在这种情况下，用于 CSS 的相对路径将解析为绝对路径 https://example.com/styles.css这是 - 我假设 - 正确的路径。

现在假设您正在使用第一个代码示例并且 URL 是 https://example.com/eventname/example-event .现在 CSS 文件的 URL 被解析为 https://example.com/eventname/styles.css这是不正确的路径。

但是，该路径仍由 Web 服务器处理，因为它与您用于事件页面的 URL 通配符相匹配 – /eventname/:event .这会导致您的应用程序呈现 event.hbs显然使用 MIME 类型 text/html 的模板而不是 text/css正如预期的那样，因此出现错误 MIME type not supported。

---

要解决此问题，您可以:

• 使用绝对(相对于您的应用程序域)路径(/styles.css – 注意 /)
• 为每个页面使用有效的相对路径(如果是 ../styles.css，则为 /eventname/:event)

虽然这两个选项都有效，但我强烈推荐第一个，因为它更易于维护。