在 Express JS 中提供静态文件。加载 type="module" js 文件时出错

Question

我有一个 Express JS 服务器，并在单独的文件夹中包含了一个 Vue.js 3 应用程序。

构建 VueJS 应用程序后，我尝试静态地提供它。这在本地工作得很好。但是，当我在 Render 或 Ngrok 上测试静态端时，我无法查看 UI，它无法加载

type="module"

JS 文件，并且我收到 400 响应。

这很奇怪，因为它在本地工作得很好，当我通过 Render / Ngrok 托管它时，CSS 文件似乎加载得很好，但只是 JS 文件导致了错误

快递如下：

// Using node-version 18
import express from 'express';
import path from 'path';
import { fileURLToPath } from 'url';

const app = express();
const PORT = process.env.PORT || 5000;
const dirname = path.dirname(fileURLToPath(import.meta.url));
const vueStaticMiddleware = express.static(path.join(dirname, 'client/dist'));

app.use(vueStaticMiddleware);
app.use('*', (req, res, next) => {
    res.sendFile(path.join(__dirname, 'client/dist/index.html'));
});

app.listen(PORT, () => console.log(`Server running on PORT: ${PORT}`));

文件夹结构为：

- client (Vue) /
  - dist/
    - assets/
      - index-65bbd409.js
      - index-159be68d.css
    - index.html
- index.js (Express)

客户端/dist/index/html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/images/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Vue App</title>
    <script type="module" crossorigin src="/assets/index-65bbd409.js"></script>
    <link rel="stylesheet" href="/assets/index-159be68d.css">
  </head>
  <body>
    <div id="app"></div>    
  </body>
</html>

错误

我尝试过更改静态终点和其他各种东西，但是没有效果

对此有什么想法/想法吗？

谢谢

Answer 1

问题是，如果我使用 ngrok 或 Render 来托管它，则该 URL 未在我的 COR 配置中列入白名单。将其列入白名单后，问题就解决了！

由于没有出现 CORS 错误，所以很难找到原因

在 Express JS 中提供静态文件。加载 type="module" js 文件时出错

问题描述投票：0回答：1

1个回答

最新问题

在 Express JS 中提供静态文件。加载 type="module" js 文件时出错

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1