React项目无法读取ENV变量，请求Symfony API返回异常

问题1：process.env.REACT_APP_API_URL 显示 undefined #

Create React App（CRA）对环境变量有明确的加载规则，你遇到的情况是环境文件的匹配逻辑或变量命名不符合要求导致的：

• 变量命名强制规则：所有自定义环境变量必须以 REACT_APP_ 开头，缺少这个前缀会被CRA自动忽略。
• 环境文件加载逻辑：
  • 执行 npm start（开发模式）时，CRA会优先加载 .env.development，其次是 .env；不会自动读取 .env.production。
  • 执行 npm run build（生产构建）时，才会自动加载 .env.production 和 .env。
• 服务重启要求：修改环境文件后必须重启React开发服务器，否则新的变量不会生效。

针对性解决步骤： #

1. 若在开发环境测试：
   • 将 .env.production 改回 .env，或新建 .env.development 文件，写入 REACT_APP_API_URL=你的Symfony API地址。
   • 停止当前React服务，重新执行 npm start。
2. 若要进行生产构建：
   • 确认 .env.production 内的变量为 REACT_APP_API_URL=你的Symfony API地址。
   • 执行 npm run build，构建过程会自动读取 .env.production 的变量。
3. 检查变量名：确保变量名拼写正确，没有遗漏 REACT_APP_ 前缀或下划线。

问题2：请求返回HTML而非JSON #

这个问题是第一个问题的连锁反应：当 process.env.REACT_APP_API_URL 为 undefined 时，请求URL会被解析为当前前端域名下的路径（比如 http://localhost:3000/xxx），而React开发服务器会将所有未匹配到静态资源的请求返回 index.html，因此你拿到的是HTML而非Symfony API返回的JSON。

只要解决第一个问题，让 process.env.REACT_APP_API_URL 正确读取到API地址，这个问题会自动消失。

额外验证步骤 #

在使用变量的代码处添加日志，验证变量是否加载成功：

console.log('API URL:', process.env.REACT_APP_API_URL);

重启服务后查看控制台输出，确认变量正常读取后再发起请求测试。

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