React配置多代理报错：package.json中proxy需为字符串的解决方法

错误原因 #

React官方提供的package.json中proxy字段仅支持单个字符串格式的代理地址，无法识别数组或对象类型，这就是你收到报错提示的原因。

正确实现步骤 #

1. 修改package.json #

移除原有的数组格式proxy配置，修改后的package.json示例：

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
}

2. 安装代理中间件 #

在项目根目录执行命令安装http-proxy-middleware：

npm install http-proxy-middleware --save-dev
# 或使用yarn
yarn add http-proxy-middleware --dev

3. 创建代理配置文件 #

在项目的src目录下新建setupProxy.js文件（文件名固定，Create React App会自动加载该文件），写入以下配置：

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

module.exports = function(app) {
    // 代理规则1：匹配/api1前缀的请求转发到第一个后端地址
    app.use(
        '/api1',
        createProxyMiddleware({
            target: 'http://192.168.29.184:5000',
            changeOrigin: true,
            pathRewrite: { '^/api1': '' }
        })
    );

    // 代理规则2：匹配/api2前缀的请求转发到第二个后端地址
    app.use(
        '/api2',
        createProxyMiddleware({
            target: 'http://192.168.1.5:5000',
            changeOrigin: true,
            pathRewrite: { '^/api2': '' }
        })
    );

    // 代理规则3：匹配/api3前缀的请求转发到本地后端地址
    app.use(
        '/api3',
        createProxyMiddleware({
            target: 'http://localhost:5000',
            changeOrigin: true,
            pathRewrite: { '^/api3': '' }
        })
    );
};

4. 接口调用示例 #

• 调用第一个后端的/user接口：前端请求地址写/api1/user，会自动转发到http://192.168.29.184:5000/user
• 调用第二个后端的/order接口：前端请求地址写/api2/order，会自动转发到http://192.168.1.5:5000/order
• 调用本地后端的/data接口：前端请求地址写/api3/data，会自动转发到http://localhost:5000/data

参数说明 #

• target：目标后端服务器地址
• changeOrigin：设置为true时，后端服务器收到的请求头中host会被替换为目标地址，避免跨域问题
• pathRewrite：重写请求路径，去掉匹配的前缀，保证后端收到的路径正确

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