如何在 Express JS 的所有路由上使用 static 资源提供文件？

Question

如何在 Express JS 的所有路由上使用 static 资源提供文件？

我尝试使用这些代码行使用 static 资源提供文件，

app.use(Express.static(`${this.PATH}`));
app.use(Cors());
app.use(Express.json()); 
app.get('*', (req, res) => {
    res.sendFile('./index.html',{root: path});
});

如果用户访问路由'localhost/test'，响应为index.html文件。 然后 main.js 也被获取。

所以这第一部分是有效的。 但是，如果用户访问路由'localhost/test/testing'，响应是 index.html 文件，但 main.js 未正确获取。 main.js 的内容是 index.html 导致"Uncaught SyntaxError: Unexpected token '<'"

Answer 1

似乎最有可能的可能性是您需要从以下位置更改index.html中的<script>标记：

<script src="main.js"></script>

对此：

<script src="/main.js"></script>

---

当您在 URL 栏中输入/test/testing时，浏览器将从您的服务器请求该文件。 您的服务器将发回index.html 。 然后，浏览器将解析该文件并查看来自该标签的请求：

<script src="main.js"></script>

由于被请求的文件没有路径，浏览器会在将请求发送到 web 服务器之前将当前页面的路径添加到该文件。 这意味着，它将发送请求：

/test/testing/main.js

到您的 web 服务器。 但是，您的express.static()路由不会找到与该路径匹配的文件。 因此，它将落入您的res.sendFile('./index.html',{root: path}); 当浏览器期待 Javascript 文件时，浏览器将得到一个 HTML 文件，因此会给您报告的错误。

我个人不喜欢像你这样发送index.html的所有路由的粉丝，因为它可能导致非常混乱的错误或问题，但如果你这样做，你必须不使用页面中任何 URL 的相对路径，因为当有人请求/test/testing之类的内容时，它们都会中断。