不支持获取MIME类型

Question

我有一个非常奇怪的问题，但是，我已经解决了，但想知道原因。我使用node.js和express。
在我的server.js文件中，我写了类似的路由代码：

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

没有具体的＆＃34; eventname＆＃34;当我尝试加载页面时，它成功加载，只是它没有加载我的.css文件，提供 MIME类型不支持错误。但是，当我删除＆＃34; eventname＆＃34;

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

一切都开始变得很好。 为什么会发生这种情况，我在快递中做错了什么？

Answer 1

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

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

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

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

现在假设你改为使用第一个代码示例，而网址是https://example.com/eventname/example-event。现在，CSS文件的网址已解析为https://example.com/eventname/styles.css，不是正确的路径。

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

要解决此问题，您可以：

• 使用绝对（相对于您的应用程序的域）路径（/styles.css - 请注意/）
• 为每个页面使用有效的相对路径（../styles.css时为/eventname/:event）

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

Answer 2

如果收到该错误，则表示您的文件夹不在公共目录中。将其移动到公共目录，并将文件的路径更改为（/style.css）