【React-admin】构建React应用（1）-基于react-admin实现多个服务器代理

1. 前言

我想，作为前端开发，代理是必不可少知识点。它可以解决我们本地测试与服务器联调产生的跨域问题/资源共享问题。

我们知道使用nodejs时，会通过npm run start 或者yarn start的命令启动项目，会在本地起个服务。前后端分离，就会导致，前端与后端在不同的机器上，要想访问服务端代码，请求api接口，那么就需要配置代理。

不管基于什么框架，配置代理都是必不可少的。

如果你服务端的api接口都有固定的开头即/api或者其他的开头，但是都一样，那么你只要配置一个就可以了。但是我所开发的项目往往是需要多个项目共同支撑的，所以接口的开头并不是同一个，那么就需要配置多个。

1.1 antd.pro配置单个代理

先看一下antd.pro怎么配置一个

export default {
  dev: {
    '/frame': {
      target: 'http://192.168.1.96:9000',
      changeOrigin: true,
      pathRewrite: { '^': '' },
    }
};

配置单个代理，这里/frame也可以写成/，那么在调用api接口时，就会根据你所配置的/iframe找到对应的以/frame开头的namespace。

这很简单，但是当你有不同的api头时，这样配置显然是不行的，有的人可能说，我直接配置/开头，不就能访问所有的接口了么？

其实不然，假如你项目中有/frame和/find开头的api，那么你这样只会访问第一个开始的api。

怎么理解呢？ 比如你的入口第一个请求是登陆，而你登陆接口是以/frame开头的，那么你项目中所有以/frame开头的接口都能正常访问，但是所以以/find均不可访问，会出现404。

那么我们就需要去配置多个api头。

1.2 antd.pro配置多个代理

export default {
  dev: {
    '/frame': {
      target: 'http://192.168.1.96:9000',
      changeOrigin: true,
      pathRewrite: { '^': '' },
    },
    '/find': {
      target: 'http://192.168.1.96:9000',
      changeOrigin: true,
      pathRewrite: { '^': '' },
    }
  }
};

那么在api请求匹配到以/find或者/frame开头的请求都会匹配到对应的服务端请求。

1.3 react-admin 配置代理

由于antd.pro不能很好地集成到微前端qiankun中，所以将项目改成react-admin，虽然项目框架变了，但是业务没变，所以也会去配置多个代理头。

const proxy = require('http-proxy-middleware');

// 前端web服务代理配置
module.exports = function(app) {
  app.use(proxy('/frame',
    {
      target: 'http://192.168.1.106:9000',
      pathRewrite: {
        '^': '', // 如果后端接口无前缀，可以通过这种方式去掉
      },
      changeOrigin: true,
      secure: false, // 是否验证证书
      ws: true, // 启用websocket
    },
  ));
  app.use(proxy('/authmanage',
  {
    target: 'http://192.168.1.106:9000',
    pathRewrite: {
      '^': '', // 如果后端接口无前缀，可以通过这种方式去掉
    },
    changeOrigin: true,
    secure: false, // 是否验证证书
    ws: true, // 启用websocket
  },
));
};

如果你有这样的需求，那么你可以使用多个app.use()的方式去配置多个代理，这里跟antd.pro就有些差别了。