javascript - 通过 React 和 axios 使用不同的 API url 进行开发和生产

Question

我正在使用 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为。 我认为这不是正确的做法。使用不同 url 进行开发（在本地 运行时）和生产（）的最佳方式是什么？ 我正在考虑为此目的使用dotenv 。这是正确的方法吗？ 最佳做法是什么？http://localhost:9999

npm startnpm build

Answer 1

如果您使用的是 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`

Answer 2

您可以创建 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文件。

这是文档的相关部分。