在 React 和 axios 中使用不同的 API url 进行开发和生产

IT技术 javascript reactjs axios create-react-app
2021-04-25 13:52:57

我正在使用 React 前端和 Node.js 后端（API）构建 Web 应用程序。
在 React 前端，我调用这样的 API 方法： 

axios({
    method: 'post',
    url: 'http://servername:9999/reports.activities',
    data: {
        user_id: 1
    }
}).then(res => {
    this.setState(res.data);
});

有时我需要测试尚未发布到生产环境的 API 方法。
当我在本地测试后端时，我nodemon api.js在localhost:9999.
每次我想用本地运行的 API 测试前端时，我都http://servername:9999必须http://localhost:9999在我的前端代码中更改为。
我认为这不是正确的方法。
使用不同 url 进行开发（在npm start本地运行时）和生产（npm build）的最佳方法是什么？
我正在考虑为此目的使用dotenv。这是正确的方法吗？
最佳做法是什么？

2个回答

如果您使用的是 create-react-app，则您已经安装了 dotenv。

https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-development-environment-variables-in-env

所以你可以这样做：

const API_ENDPOINT = process.env.REACT_APP_API_ENDPOINT || 'http://production';

...
url: `${API_ENDPOINT}/reports.activities`

您可以创建 2 个.env名为.env.development和 的文件.env.production。

//.env.development
REACT_APP_API_ENDPOINT=http://localhost:9999

//.env.production
REACT_APP_API_ENDPOINT=https://servername:9999

然后按如下方式使用它 -

//api.js
const API_ENDPOINT = process.env.REACT_APP_API_ENDPOINT

axios({
    method: 'post',
    url: `${API_ENDPOINT}/reports.activities`,
    data: {
        user_id: 1
    }
}).then(res => {
    this.setState(res.data);
});

它的工作方式是：当您运行时npm start，react 将使用该.env.development文件，当您运行时npm run build，react 将使用该.env.production文件。

这是文档的相关部分。

其它你可能感兴趣的问题
上一篇SCRIPT1002：使用 React + Babel + Webpack 的 IE11 中的语法错误 下一篇哪个是更精确的直线运动系统？