node.js - 如何使用 create-react-app 和expressjs 后端在部署中正确进行 api 调用？

Question

我正在尝试将 react 应用程序部署到服务器。

当我部署的应用程序尝试调用同一服务器上的 api 时，它收到以下错误:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3045/login. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘http://xxx.xxx.x.xx:5000’).

package.json 文件指定了代理:

  "proxy": "http://localhost:3045",

这是我的 API 调用:

fetch('/login',
      {
        method: 'POST',
        credentials: 'include',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          password
        })
      })).json()

让我更加困惑的是，当我从远程服务器提供站点服务，从我自己的本地计算机访问它，并在我的本地计算机上提供后端服务时，该站点正在调用我自己的本地端口(一旦我注意到发生了什么并将 cors 配置源更改为远程服务器的 ip 进行测试，就成功了)，并访问从我的本地计算机提供的 api，而不是在它(远程部署服务器)自己的本地端口上。

我在远程服务器 api 上的 cors 配置:

app.use(
  cors({
    origin: 'http://localhost:5000',
    credentials: true,
  }),

我需要进行哪些更改才能使我的站点向其自己的本地端口(而不是客户端)发出 api 调用？

Answer 1

根据内存(并遇到类似的问题)，代理在部署时并不意味着可以工作。

参见Create-React-App Proxy in Production Build