如何在create-react-app项目的package.json代理配置中使用环境变量

问题原因 #

package.json 是纯静态 JSON 文件，本身不支持解析环境变量，你在 proxy 字段中填写的任何变量占位符都会被当做普通字符串处理，无法被替换为对应环境变量的值，因此 proxy 实际读取到的内容不是合法的 http:// 或 https:// 开头的地址，就会触发你遇到的报错。

正确配置方案 #

1. 清理原有配置 #

先删除 package.json 中你添加的 "proxy": "xxx" 配置项。

2. 安装代理依赖 #

在项目根目录执行以下命令安装所需依赖：

npm install http-proxy-middleware --save

如果使用 yarn 则执行：

yarn add http-proxy-middleware

3. 新建自定义代理配置文件 #

在项目 src 目录下创建名为 setupProxy.js 的文件，写入如下内容：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    // 此处修改为你需要代理的接口路径前缀，示例为所有 /api 开头的请求都会走代理
    '/api',
    createProxyMiddleware({
      // 直接读取环境变量，会自动加载 .env.development.local 中的配置
      target: process.env.REACT_APP_API_BASE_URL,
      changeOrigin: true,
      // 如需重写路径可打开下方注释，示例为把请求路径开头的 /api 去掉
      // pathRewrite: {
      //   '^/api': ''
      // }
    })
  );

  // 如有多个不同前缀的接口需要代理，可在此添加多个 app.use 规则
};

如果你之前使用 package.json 的 proxy 是要代理所有非静态资源请求，可以把上面的路径前缀改成 '^/' 即可。

4. 验证环境变量 #

确认你的 .env.development.local 文件中 REACT_APP_API_BASE_URL 的值为 http:// 或 https:// 开头的完整后端地址，示例：

REACT_APP_API_BASE_URL=http://127.0.0.1:8000

配置完成后重启 npm start 即可正常生效。

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