react配置多个跨域代理

一、直接在package.json中配置跨域代理，只能配置一个

  "proxy": "http://172.16.0.234:8884"

在pakage.json文件中的proxy的值只能是一个字符串，若给proxy的值换成对象则会报错，所以配置多个不同的跨域代理需要其他方法

二、使用插件：http-proxy-middleware

1. 安装插件

npm install http-proxy-middleware 

或者

yarn add http-proxy-middleware

2. 使用

在src目录下创建文件setupProxy.js文件

const proxy = require('http-proxy-middleware');
 
module.exports = function(app) {
  app.use(proxy('/api', {
    target: 'http://172.16.0.234:8884/'
  }));
  app.use(proxy('/gpu_data', {
    target: 'http://10.23.27.134:8885',    // 目标服务器 host
    secure: false,
    changeOrigin: false,                         //是否需要改变原始主机头为目标URL默认false，
   }));
}

还有一种用法，解释更为详细

3. 接口代理

export function getOrder( data) {
  return fetch({
    url: '/api/getOrder',          // 实际请求地址 http://172.16.0.234:8884/api/getOrder
    method: 'post',
    data,
  })
}
export function getGpuList( params) {
  return axios.get('/gpu_data/list',params)     // 实际请求地址 http://10.23.27.134:8885/gpu_data/list
}