无需重启React应用，如何动态修改代理目标？

以下是几种无需重启React应用即可切换后端Node.js服务器的方案：

方案1：动态拼接请求地址（最直接） #

放弃package.json的静态代理配置，在React请求中直接根据用户选择的服务器IP拼接完整请求地址。

步骤： #

1. 后端配置CORS：因为React应用和内网Node.js服务器属于跨域，需要在每个Node.js服务器中开启CORS支持。比如使用cors包：

const cors = require('cors');
const express = require('express');
const app = express();

// 允许所有来源的跨域请求（内网环境可放心使用）
app.use(cors());

2. React中动态发起请求：封装请求函数，接收目标服务器地址作为参数：

// 通用请求函数
const requestToServer = async (serverAddress, apiPath, options = {}) => {
  const fullUrl = `${serverAddress}/${apiPath.replace(/^\/+/, '')}`;
  const response = await fetch(fullUrl, options);
  if (!response.ok) throw new Error(`请求失败：${response.status}`);
  return response.json();
};

// 使用示例：用户选择服务器后调用
const selectedServer = 'http://192.168.1.100:3000';
requestToServer(selectedServer, 'api/get-status')
  .then(data => console.log('服务器状态：', data))
  .catch(err => console.error(err));

方案2：自定义动态代理中间件（基于create-react-app） #

利用create-react-app支持的setupProxy.js文件，编写动态转发逻辑，无需重启应用即可生效。

步骤： #

1. 安装依赖：

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

2. 创建src/setupProxy.js：编写根据请求标识转发的逻辑，比如通过路径前缀或请求头区分目标服务器：

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

module.exports = function(app) {
  // 方式1：通过路径前缀转发到固定服务器
  app.use('/server-a', createProxyMiddleware({
    target: 'http://192.168.1.100:3000',
    changeOrigin: true,
    pathRewrite: { '^/server-a': '' } // 移除前缀后转发
  }));

  app.use('/server-b', createProxyMiddleware({
    target: 'http://192.168.1.101:3000',
    changeOrigin: true,
    pathRewrite: { '^/server-b': '' }
  }));

  // 方式2：通过请求头动态指定目标服务器
  app.use('/api', createProxyMiddleware({
    target: (req) => {
      // 从请求头获取用户选择的服务器地址
      const target = req.headers['x-target-server'];
      return target || 'http://default-server-ip:3000';
    },
    changeOrigin: true
  }));
};

3. React中发起请求：

// 方式1：使用路径前缀
fetch('/server-a/api/get-status')

// 方式2：携带请求头
fetch('/api/get-status', {
  headers: {
    'X-Target-Server': 'http://192.168.1.100:3000'
  }
})

方案3：搭建独立中间转发服务 #

如果需要统一鉴权、日志或更复杂的转发逻辑，可以搭建一个单独的Node.js中间层，作为React和后端服务器的桥梁。

示例中间层代码： #

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

app.use(express.json());

// 接收React请求，根据参数转发到目标服务器
app.use('/proxy', (req, res) => {
  const targetServer = req.query.target;
  if (!targetServer) {
    return res.status(400).send('请指定目标服务器地址');
  }

  const proxy = createProxyMiddleware({
    target: targetServer,
    changeOrigin: true,
    onError: (err) => res.status(500).send(`连接服务器失败：${err.message}`)
  });

  proxy(req, res);
});

app.listen(8080, () => {
  console.log('中间转发服务运行在端口8080');
});

React中请求示例： #

const targetServer = 'http://192.168.1.100:3000';
fetch(`http://localhost:8080/proxy/api/get-status?target=${encodeURIComponent(targetServer)}`)

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