React配置多环境变量后axios请求URL拼接异常如何排查

开发者阿泽

2026-8-29

问题根因

异常URL中出现的%E2%80%9C、%E2%80%9D是中文全角左、右双引号的URL转义字符，问题核心是环境变量配置的语法错误：

你在.env.development.local中写值时使用了中文全角双引号包裹地址，Create React App（CRA）读取.env文件时不会自动剥离值两端的引号，会把引号作为字符串内容的一部分读入环境变量，最终process.env.REACT_APP_API_URL的实际值是“http://localhost:3001”，而非预期的http://localhost:3001。
axios发起请求时，检测到传入的地址前缀不是合法的绝对路径格式（开头多了全角左引号），会自动将其作为相对路径拼接在当前前端服务的源地址http://localhost:3000后，特殊字符被URL编码后就出现了你看到的异常请求地址。

另外两个容易埋下隐患的配置问题：

.env文件中等号两侧加了多余空格，不符合dotenv解析规范，极端场景下会出现值读取异常
package.json的dev脚本中，cross-env传入的环境变量值额外加了单引号，Windows环境下cross-env会将单引号识别为值的一部分，导致环境变量值不符合预期

修复方案

按以下步骤调整即可：

修正.env.development.local配置，删除所有包裹值的引号（包括英文引号，CRA会将其识别为值的一部分），去掉等号两侧的多余空格，修改后内容：

REACT_APP_API_URL=http://localhost:3001
REACT_APP_ENV=dev

提示：CRA要求所有自定义环境变量必须以REACT_APP_为前缀，否则不会被注入到前端构建的process.env对象中。

修正package.json中scripts段的dev脚本，去掉cross-env传值的多余单引号，修改后：

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "dev": "cross-env REACT_APP_ENV=dev npm run start"
  }