Create React App加载环境变量异常导致axios请求URL格式错误求助

根因分析 #

问题本质是从.env文件读取的REACT_APP_API_URL变量开头包含非ASCII的特殊Unicode字符，观察错误URL里的ĥttp（首字母h带抑扬符）即可发现异常：

• axios判断baseURL是否为绝对路径的逻辑是识别开头是否为标准的http:///https://等协议头，当baseURL开头是特殊字符时，axios会将其判定为相对路径，自动拼接到当前页面的域名（http://localhost:3000）之后，最终生成错误的请求地址。
• 大部分终端、控制台对这类特殊Unicode字符的渲染存在兼容问题，会把ĥ渲染为普通的h，也不会显示零宽空格这类不可见字符，所以直接打印变量会看起来完全正常。
• 直接在启动命令里传环境变量、Netlify预发环境的变量都是纯ASCII编码，没有特殊字符，所以运行正常。

验证方法 #

在config/api.ts中添加以下代码，打印变量的字符编码即可确认问题：

// 输出每个字符的Unicode编码，正常h的十六进制编码为0x68
console.log(apiUrl.split('').map(char => char.charCodeAt(0).toString(16)));

如果返回的第一个字符编码不是68，即可证实变量开头存在特殊字符。

解决方案 #

直接打开项目根目录的.env文件，删除REACT_APP_API_URL整行配置，手动重新输入一遍（不要复制粘贴旧内容），保存后重启开发服务即可解决问题。
如果要彻底排查，可以用支持显示不可见字符的纯文本编辑器打开.env文件，就能直接看到多余的特殊字符，删除即可。

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