react代理

注：项目搭建使用的是create-react-app脚手架。（这篇文章，我是怀着无语的心情写的）。

1. 脚手架版本低于2.0，可以直接在在package.json文件中使用proxy，使用对象类型

"proxy":{
   "/api":{
      "target":"http://x.xx.com",
      "changeOrigin": true
    },
    "/bpi":{
      "target":"http://x.xx.com",
      "changeOrigin": true
    }
}

2. 脚手架版本高于2.0，在package.json文件中使用proxy，只能使用字符串类型

"proxy": "http://x.xx.com",

此时无法进行多个代理，需要借用中间件(http-proxy-middleware)

       2.1 安装

npm install http-proxy-middleware

2.2 使用

在src下新建setupProxy.js文件，编辑代码（版本不同，引入方法不同）

       2.2.1   0.x.x版本

// 0.x.x版本
const proxy = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    proxy({
      target: 'http://x.xx.com',
      changeOrigin: true,
    })
  );
  app.use(
    '/bpi',
    proxy({
      target: 'http://x.xx.com',
      changeOrigin: true,
    })
  );
};

             2.2.2   1.x.x版本

// 1.x.x版本
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware ({
      target: 'http://x.xx.com',
      changeOrigin: true,
    })
  );
  app.use(
    '/bpi',
    createProxyMiddleware ({
      target: 'http://x.xx.com',
      changeOrigin: true,
    })
  );
};