如何在 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之類的內容時，它們都會中斷。