如何在ReactJS的.env文件中配置代理服务器替代package.json硬编码

失效原因 #

package.json 本身不支持环境变量占位符解析，react-scripts 读取 proxy 字段时会直接将 ${PROXY} 作为普通字符串处理，不会自动加载 .env 中的变量做替换，因此你当前的配置无法生效。

可行解决方案 #

方案1：使用官方支持的自定义代理配置（推荐，无需eject项目） #

Create React App 支持通过 src/setupProxy.js 文件自定义代理规则，可以直接读取环境变量：

1. 安装代理依赖：

npm install http-proxy-middleware --save-dev

2. 在项目 src 目录下新建 setupProxy.js 文件，写入以下内容：

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

module.exports = function(app) {
  // 替换下面的 /api 为你实际需要代理的请求前缀
  app.use(
    '/api',
    createProxyMiddleware({
      target: process.env.PROXY,
      changeOrigin: true,
      // 如果需要去掉请求前缀再转发，可以取消下面的注释
      // pathRewrite: {'^/api' : ''}
    })
  );
};

3. 删除 package.json 中的 "proxy": "${PROXY}" 配置，保留 .env 中的 PROXY=http://localhost:3001 即可。
4. 重启开发服务，代理即可正常读取环境变量生效。

方案2：动态修改package.json的proxy字段 #

如果不想调整现有代理逻辑，可以通过启动前执行脚本动态替换proxy值：

1. 项目根目录新建 set-proxy.js 文件：

const fs = require('fs');
const pkg = require('./package.json');
pkg.proxy = process.env.PROXY;
fs.writeFileSync('./package.json', JSON.stringify(pkg, null, 2));

2. 修改 package.json 中的启动脚本：

"scripts": {
  "start": "node set-proxy.js && CHOKIDAR_USEPOLLING=true react-scripts start",
}

3. 执行 npm start 启动项目时，脚本会自动读取 .env 中的PROXY值写入package.json的proxy字段，完成代理配置。

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