Question

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

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

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

localhost:5000/name

在生产中，当我在heroku和vercel等在线平台上部署该应用程序时。从react-app通过axios发送的api请求全部失败。在heroku / vercel上进行部署时，我将代理更改为在线后端URL。

我想知道当React应用程序在线部署时（最好在heroku / vercel上）如何更改代理。这样我的api请求不会失败。

技术堆栈：为前端做出反应，axios发送请求，为后端提供firebase。后端也部署在heroku上。

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

Answer 1

您应该创建一个配置对象，并根据环境选择base_url。在本地，它将选择development网址，在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=>({...}))

从部署在heroku上的React应用发送axios（api）请求

1 个答案: