使用 Heroku 在 netlify 上部署时如何避免 CORS 并使用代理答案

【问题标题】：How to avoid CORS and use proxy when deploying on netlify with Heroku使用 Heroku 在 netlify 上部署时如何避免 CORS 并使用代理
【发布时间】：2022-01-04 18:36:40
【问题描述】：

希望问题很清楚，因为我真的不知道发生了什么。

MERN 应用最近在添加代理并尝试修复 CORS 后完全停止工作。我有一个 api 端点变量“API_URL”，我所有的请求都是这样的

axios.get(`${API_URL}/api/users)

一开始我在 react package.json 上做了一个代理

"proxy": "http://localhost:5001",

所以我可以将所有请求调用更改为这样

axios.get('/api/users')

我还删除了我的来源允许自定义功能：-

originAllow = (app) => {
  app.all("*", function (req, res, next) {
    if (!req.get("Origin")) return next();
    res.set("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Methods", "GET, PUT, POST, DELETE, PATCH");
    res.set(
      "Access-Control-Allow-Headers",
      "X-Requested-With,Content-Type,x-auth-token"
    );
    next();
  });
};
originAllow(app);

在本地一切正常，但是当我将它部署到 Netlify 时，网站崩溃并出现错误 -> 无法读取未定义的属性（读取“地图”），这基本上是因为它无法从api 所以我的数组是空的，没有什么要映射的。

后来我试过了

"proxy": "https://madevmeet.herokuapp.com",

在本地也可以完美运行，但是当我部署它时出现同样的错误。

我也尝试安装 CORS 包并在我的后端使用它，将它重新部署到 Heroku 和 Netlify，我仍然得到同样的错误。它让我发疯。再次在本地一切正常。

我错过了什么？如果它确实有效并且使用 API 变量，我可以恢复一切，但我确定我错过了一些东西。

提前致谢！

【问题讨论】：

标签： node.js reactjs heroku cors netlify

【解决方案1】：

解决了！

解决方案：我在客户端的 _redirects 中添加了以下行： /api/* https://mysite.herokuapp.com/:splat 200

和服务器中的 procfile，其中包含以下行： web:node server.js

【讨论】：