如何在部署中使用具有 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’).

包 .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

尝试在没有任何特殊 cors 模块的情况下进行设置：

app.use(function (req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:5000');//If it doesn't work, change it to "*"
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,token');
    res.setHeader('Access-Control-Allow-Credentials', true);
    next();
});

Answer 2

从内存中（并遇到类似问题）代理在部署时并不意味着有效。

请参见生产版本中的创建-反应-应用程序代理