关于react的代理配置(可配置多个代理)

// 创建并暴露App
export default class App extends Component{
  getData = () => {
    axios.get('http://localhost:3000/api/info').then(
      response => {console.log('成功', response.data);},
      error => {console.log('失败',error);}
    )
  }
  render(){
    return (
      <div>
        <Hello></Hello>
        <Welcome></Welcome>
        <button onClick={this.getData}>点我请求数据</button>
      </div>
    )
  }
}

const proxy = require('http-proxy-middleware')module.export = function(app){
  app.use(
    // 代理api 下面再把 /api 替换为空字符串 因为路径里面没有 /api
    proxy('/api1', {  // 遇见 /api1 前缀的请求 就会触发该代理配置
      target: 'http://localhost:5000', // 请求转发给谁
      changeOrigin: true, // 控制服务器接收到的请求头Host的值 
      // 重新请求路径 把 /api1 替换为空字符串 必须加
      pathRewrite:{'^/api1' : ''} 
    }),
    proxy('/api2', { // 遇见 /api2前缀的请求 就会触发该代理配置
      target: 'http://localhost:5001',
      changeOrigin: true,
      // 把api 替换为空字符串
      pathRewrite:{'^/api2' : ''}
    }),
  )
}

// 创建并暴露App
export default class App extends Component{
  getDataOne = () => {
    axios.get('http://localhost:3000/api1/info').then(
      response => {console.log('成功', response.data);},
      error => {console.log('失败',error);}
    )
  }
  getDataTwo = () => {
    axios.get('http://localhost:3000/api2/car').then(
      response => {console.log('成功', response.data);},
      error => {console.log('失败',error);}
    )
  }
  render(){
    return (
      <div>
        <Hello></Hello>
        <Welcome></Welcome>
        <button onClick={this.getDataOne}>点我请求数据1</button>
        <button onClick={this.getDataTwo}>点我请求数据2</button>
      </div>
    )
  }
}