获取不支持的 MIME 类型

Question

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

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

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

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

一切开始顺利。为什么会发生这种情况，我在快递中做错了什么吗？

Answer 1

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

\n\n\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n\n\n

要解决此问题，您可以：

\n\n

\n
• 使用绝对（相对于应用程序的域）路径（/styles.css\xe2\x80\x93 注意/）
\n
• 为每个页面使用有效的相对路径（../styles.css如果是/eventname/:event）
\n

\n\n

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

\n