从托管服务器上的 Production React 应用程序访问 Express API

Question

我有一个 Lightsail 实例、Ubuntu 和使用 Vite 构建的 React 应用程序。 Lightsail Bitnami 实例有一个默认的 Apache 配置，因此为了进行测试，我只是将根目录从 Vite 生产版本移至我的

dist/

文件夹的目录。

这可行，但我还有一个在端口 3000 上运行的 Express API，我可以在开发时使用它，但在产品中，当我发出请求时，我收到 CORS 错误。我确实尝试在 Apache 设置中进行反向代理，但没有成功。我以前从未使用过 Apache，只有很少的 NGINX 经验。

这是我的快递代码：

import express from 'express'
import cors from 'cors'
//other imports

const app = express()
const port = 3000

app.use(cors({
  origin: "*"
}))

app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

app.get("/test", (req, res) => {
 // my code that never gets run cause the route never gets hit in production
})

app.listen(port, () => {
  console.log(`Server started and listening on port ${port}`)
})

这是我的 Apache 配置

# Default Virtual Host configuration.

# Let Apache know we're behind a SSL reverse proxy
SetEnvIf X-Forwarded-Proto https HTTPS=on

<VirtualHost _default_:80>
  ProxyRequests On
  ProxyPass /test http://localhost:3000/
  ProxyPassReverse /test http://localhost:3000/

  DocumentRoot "/home/bitnami/my-app/dist"
  <Directory "/home/bitnami/my-app/dist">
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
  </Directory>

  # Error Documents
  ErrorDocument 503 /503.html
</VirtualHost>
Include "/opt/bitnami/apache/conf/bitnami/bitnami-ssl.conf"

以下是相关的 React 代码：

function handleSubmit() {
    setLoading(true);
    fetch(
      `/test?start=${start}&end=${end}&id=${Player.playerInfo.videoData.video_id}`
    )
      .then((response) => {
        // doing stuff with response
      })
  }

我知道我缺少一些配置或一些明显的东西，但我没有部署生产代码的经验，我正在尝试掌握这一点，但我的谷歌搜索并没有带来太多结果。