无法提供具有快速路由且没有尾部斜杠的静态文件

Question

我想要一个名为“main”的路由，它将为静态文件提供服务：

app.use('/main',express.static(__dirname+'/public'));

但是当我这样做时：

http://my.site.dev/main

无法下载 CSS 和 JS 文件，因为它试图从中获取它们

http://my.site.dev/css/styles.css

它应该从以下位置获取文件：

http://my.site.dev/main/css/styles.css

但是，如果我使用尾部斜杠访问我的网站：

http://my.site.dev/main/

所有文件都顺利通过

有什么想法为什么没有尾部斜杠会导致 CSS 和 JS 等资源无法进入？

Answer 1

这是一个 http 问题，而不仅仅是与 Express 相关的挑战。该问题在以下位置讨论：

• Relative URLs and trailing slashes
• http://www.bizcoder.com/the-mystery-of-the-trailing-slash-and-the-relative-url

如果您的 URL 是 /main 并且您的相对 URL 是 css/style.css，它将解析为 /css/style.css；但如果您的 URL 是 /main/，则相对 URL 会解析为 /main/css/style.css。

我处理这个问题的策略是重定向以添加尾部斜杠。在 Express 中是这样的：

app.all(/^\/main$/, function(req, res) { res.redirect('/main/'); });
app.use('/main/',express.static(__dirname+'/public'));

或者：

app.enable('strict routing');
app.all('/main', function(req, res) { res.redirect('/main/'); });
app.use('/main/',express.static(__dirname+'/public'));

Answer 2

如何在 HTML 中请求 JS/CSS 文件？如果您使用像css/styles.css 这样的字符串，那么它将尝试从当前目录中获取它们。 /main 的目录是/（就像/main.html 一样），而/main/ 的目录是/main/。一个快速的解决方法是在您的 HTML 中使用 /main/css/styles.css。