ReactJS登录模块API Base URL失效问题排查与解决求助

问题根源 #

控制台出现/undefined/login/，说明process.env.REACT_APP_API_BASE_URL环境变量未被正确读取，导致BASE_URL值为undefined，最终拼接出错误的请求路径。

解决步骤 #

1. 创建/配置本地环境变量文件 #

• 项目根目录下需存在.env.development文件（本地开发专用），若没有则新建。
• 在文件内添加正确的API基础地址：

  REACT_APP_API_BASE_URL=https://xxxxxxxxxx.com/api/
  

  注意：变量名必须以REACT_APP_开头，这是React识别环境变量的强制规则。

2. 重启本地开发服务 #

修改环境变量后，必须重启npm start或你使用的开发服务进程，新配置的环境变量才会生效。

3. 验证环境变量是否生效 #

可在src/utils/api.js中临时添加日志验证：

export const BASE_URL = `${process.env.REACT_APP_API_BASE_URL}`
console.log('当前BASE_URL:', BASE_URL) // 查看控制台输出是否为预期的API地址
axios.defaults.baseURL = BASE_URL

确认输出正确后，可删除该行日志。

4. 确认请求路径拼接逻辑 #

确保登录接口使用相对路径发起请求，示例：

axios.post('/login/', loginFormData)

这样axios会自动将baseURL与相对路径拼接为完整的https://xxxxxxxxxx.com/api/login/。

额外提示 #

从服务器下载的项目通常不会包含.env类文件（这类文件会被.gitignore忽略，避免敏感信息提交），所以需要自行创建对应环境的配置文件，且不要将API地址硬编码到代码中，始终用环境变量管理多环境配置。

内容的提问来源于stack exchange，提问作者user20885204