通过 http-proxy-middleware 跨域代理与添加自定义cookie

废话不多说，直接先上代码

const proxy = require("http-proxy-middleware");
 
module.exports = function(app) {
  app.use(
    proxy("/mid-api/**", {
      target: "http://api.server.com/",
      changeOrigin: true,
      pathRewrite: {
        '^/mid-api': '',
      },
      onProxyReq(proxyReq, req, res) {
        proxyReq.setHeader('cookie', 'SERVER_TOKEN=153b8baf-4b2d');
      }
    })
  );
  app.use(
    proxy("/api-2/**", {
      target: "https://easy-mock.com/mock/5c0f31837214cf627b8d43f0/",
      changeOrigin: true,
    
    })
  );
};

简单解释一下：

1. 以上代码定义了两个接口路径代理，/mid-adp/ 和 /api-2/ 只要是匹配到这两个路径的请求，都会代理到target 路径上。
2. pathRewrite：顾名思义，就是重写路径，如上例子：pathRewrite: {'^/mid-api': ''} // 最终会把/mid-api替换为空。比如我们请求的路径是：http://localhost:3000/mid-api/user/user-info，最终发出去的请求路径是：http://localhost:3000/user/user-info。这有什么好处呢？比如项目中你A模块需要代理到A服务器，B模块代理到B服务器，但接口地址都是同一个（user/user-info），就可以通过这个区分开来
3. 重点说一下onProxyReq()，非常重要，我们服务器通常会通过cookie或者token来验证用户身份，那我们就可以通过代理时给请求头加入相应的信息，这样就可以通过服务器的身份验证了

onProxyReq(proxyReq, req, res) {
        proxyReq.setHeader('cookie', 'ULS_TOKEN=1234567890');
      }

---

顺便说一下，如果是 create-react-app（v2.0以上） 项目设置代理方法：

1. 最简单就是在package.json加 proxy属性，但只能是代理服务器地址的字符串："proxy": "abc.com.baidu.com"，这样请求自动会使用这个代理。
2. 需要复杂的设置，那就要在src目录下创建一个js文件：setupProxy.js，然后把上面的代码加进去就可以了，请求自动就会走设置的代理，亲测有效