
在react中,未以react_app_前缀声明的环境变量无法通过process.env访问,导致process.env.api_url为undefined,进而使请求url错误拼接为https://api.uat-solve.dell.com/undefined/code。
这是 React 应用部署时常见的环境变量陷阱。Create React App(CRA)默认仅暴露以 REACTAPP 开头的环境变量至运行时代码中。你当前的 .env.uat(或构建时使用的环境文件)中定义的是:
API_URL=https://api.uat-solve.dell.com FRONT_URL=https://uat-solve.dell.com
但由于缺少 REACT_APP_ 前缀,CRA 在构建阶段会完全忽略这些变量,process.env.API_URL 实际值为 undefined —— 这正是你在 UAT 环境中看到 https://api.uat-solve.dell.com/undefined/code 的根本原因。
而本地开发时看似“正常”,极可能是因为:
- 你误用了已存在的、带 REACT_APP_ 前缀的变量(如 REACT_APP_API_URL);
- 或本地 .env 文件中恰好存在同名但已正确命名的变量;
- 或存在未提交的本地 .env 覆盖了默认行为。
✅ 正确做法:所有需在浏览器端读取的环境变量必须使用 REACT_APP_ 前缀。请立即修改 UAT 环境配置文件(如 .env.uat):
REACT_APP_API_URL=https://api.uat-solve.dell.com REACT_APP_FRONT_URL=https://uat-solve.dell.com
并在 React 代码中统一使用:
axios
.get(process.env.REACT_APP_API_URL + '/code') // ✅ 正确引用
.then(response => console.log(response.data))
.catch(error => console.error('API call failed:', error));⚠️ 注意事项:
- 变量名修改后,必须重新构建应用(npm run build 或 yarn build),环境变量仅在构建时注入,运行时不可动态更改;
- 不要尝试在 public/ 下硬编码 URL,这会破坏环境隔离;
- 避免使用第三方包(如 env-create-react-app)绕过 CRA 规范——它可能引入构建不稳定性和安全风险,且违背 CRA 设计初衷;
- 对于敏感配置(如 API 密钥),切勿放入前端环境变量,应由后端代理或服务端渲染注入。
? 小技巧:可通过在组件中临时添加 console.log(process.env) 验证变量是否成功注入(注意:仅显示 REACT_APP_* 开头的变量)。若输出为空对象或缺失目标变量,说明前缀或文件加载路径有误。
遵循 CRA 官方约定,是保障多环境稳定交付的关键一步。










