从部署在heroku上的react应用程序发送axios(api)请求

Question

在开发中，当我在localhost:3000上运行react服务器时。我使用Package.json中的proxy为后端服务器设置了baseurl，后端服务器运行在loacalhost:5000上。所以我只是将package.json中的proxy编辑为“localhost:5000”。因此从axios发送的所有api请求都将被定向到该URL。

axios.get("/name").then(res=>({...}))

与上述相同的请求将重定向到：

localhost:5000/name

在生产过程中，当我在heroku和Vercel这样的在线平台上部署应用程序时。通过axios从react-app发送的api请求都失败了。在Heroku/Vercel上部署时，我将代理更改为联机后端URL。

我想知道当一个react应用在线部署（最好是在Heroku/Vercel上）时，如何更改代理。这样我的api请求就不会失败。

Tech Stack：react用于前端，axios用于发送请求，firebase用于后端。后端也部署在Heroku上。

任何形式的支持都将不胜感激。即使有更好的平台来部署应用程序，我也可以切换到那个平台。

Answer 1

您应该创建一个配置对象，并根据环境选择base_url。在local上，它将选择developmenturl，而在Heroku上，它将使用production。

const configs = {
  development: {
    SERVER_URI: 'localhost:5000',
  },
  production: {
    SERVER_URI: 'HEROKU_URI',
  },
};

module.exports.config = configs[process.env.NODE_ENV];

还要像下面这样替换axios调用：

axios.get(`${config.SERVER_URI}/name`).then(res=>({...}))