使用REACT_APP_BASE_URL时自动添加额外域名的问题排查

核心问题 #

React应用通过npm run build构建后，API请求地址被异常拼接为https://domain/https://<PUB_IP>/api/messages，但console.log(BASE_URL)显示配置的<PUB_IP>是正确的。排查中发现配置的https://冒号丢失变为http//，导致浏览器自动补全当前域名。

排查与解决方向 #

1. 验证构建后BASE_URL的实际值 #

控制台打印的BASE_URL可能存在误导，直接检查构建产物中的实际值：

• 打开build/static/js目录下的主chunk文件，搜索BASE_URL或REACT_APP_BASE_URL，查看编译后的字符串是否存在格式错误（比如冒号被转义、缺失）。
• 检查服务器环境变量的设置：如果是通过shell设置（如export REACT_APP_BASE_URL=https://<PUB_IP>），确认没有多余空格、转义字符，Windows环境下避免使用中文引号。

2. 修正URL拼接逻辑 #

字符串拼接容易出现隐性格式问题，改用URL构造函数处理：

// 替换原字符串拼接方式
const apiUrl = new URL('/api/messages', BASE_URL);
const response = await fetch(apiUrl.toString());

URL构造函数会自动处理斜杠、协议等格式问题，避免双斜杠或协议缺失导致的相对路径错误。

3. 排查环境变量配置的格式问题 #

• 检查.env文件：确保REACT_APP_BASE_URL=https://<PUB_IP>没有多余空格，注释单独成行，文件编码为UTF-8无BOM。
• CI/CD部署场景：确认CI工具（如GitHub Actions、GitLab CI）中变量是否被正确传递，是否存在自动转义特殊字符（如冒号）的规则。

4. 检查服务器与浏览器侧的代理/缓存 #

• 查看服务器配置（如Nginx）：确认是否存在rewrite规则导致请求被重定向或拼接额外域名。
• 浏览器开发者工具Network标签：查看请求的完整生命周期，是否有30x跳转，或Service Worker缓存了旧请求地址，可尝试清空缓存后重新测试。

5. 排查静态资源基础路径配置 #

如果应用设置了homepage或PUBLIC_URL，可能影响URL解析：

• 检查package.json中的homepage字段，或构建时的PUBLIC_URL环境变量，确认未设置错误的域名前缀。

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