javascript - 使用 process.env 时 axios baseUrl 无法正常工作

Question

我的 React 项目中有一个带有 baseURL 设置的 axios 帮助程序文件。有人告诉我删除硬编码的 url 并改用 process.env，但是当我这样做时，请求不再用于获取数据，我在我的应用程序中返回了 404 GET 错误。

import axios from "axios";

// axios.defaults.baseURL = "https://example-app-name.com";
axios.defaults.baseURL = process.env.REACT_APP_BASE_URL;

export default axios;

我的项目根目录中的 .env 文件看起来像这样 - 我想也许它找不到 .env 文件，我确实安装了 dotenv 库。

REACT_APP_BASE_URL=https://example-app-name.com

我得到这些错误

GET https://example-app-name.com 404 (Not Found)
Uncaught (in promise) Error: Request failed with status code 404

Answer 1

修改.env文件时，需要重启React环境。

1. 停止 React 服务器。

2. 将以下行添加到您的 .env 文件中:

   REACT_APP_BASE_URL="https://example-app-name.com"

3. 确保在使用 REACT_APP_BASE_URL 变量的地方导入 dotenv:require('dotenv').config()

4. npm start 或 yarn start