如何在浏览器控制台中看到webpack代理请求的真实url

最近在使用ant pro的时候发现控制台response headers中有个特殊的头标识x-real-url,显示的就是真实代理到的服务器地址，很是好奇，记得原先自己搭的项目中是没有地方显示这个真实的请求地址的，这样在初次接触的时候很难确定自己写的代理是否真的被应用了，于是乎带着疑惑的我翻看了ant pro使用的umi

umi中是在循环遍历的proxy配置的过程中添加onProxyRes监听，从而添加头部x-real-url:

有了相关代码的支撑后，我决定也在我搭建的项目中添加监听代码如下

 '/saas20/api': {
        target: 'http://xx.xx.com.cn',
        changeOrigin: true,
        xfwd: true,
        pathRewrite: {
          '^': ''
        },
        onProxyRes: function (proxyRes, req, res) {
          let target = 'http://xx.xx.com.cn';
          let realUrl = target + req.url;
          proxyRes.headers['x-real-url'] = realUrl;
        },
      }

自此我自己搭建的项目中也可以在请求返回中看到真实请求的url了。

下面扩展下http-proxy-middleware其他请求监听事件。

1. option.onError: 订阅proxy的错误发生

proxy.on('error', function (err, req, res) {
  res.writeHead(500, {
    'Content-Type': 'text/plain'
  });

  res.end('Something went wrong. And we are reporting a custom error message.');
});

2. option.onProxyRes：订阅proxy的返回事件

 proxy.on('proxyRes', function (proxyRes, req, res) {
   console.log('RAW Response from the target', JSON.stringify(proxyRes.headers, true, 2));
 });

3. option.onProxyReq：订阅proxy的请求事件

 proxy.on('proxyReq', function onProxyReq(proxyReq, req, res) {
     proxyReq.setHeader('x-added', 'foobar');
 });

4. option.onOpen：订阅http代理的打开事件

 proxy.on('open', function (proxySocket) {
   proxySocket.on('data', hybiParseAndLogMessage);
 });

5. option.onClose：订阅http代理的关闭事件

 proxy.on('close', function (res, socket, head) {
   console.log('Client disconnected');
 });

6.option.onProxyReqWs: 订阅webscoket请求时间

function onProxyReqWs(proxyReq, req, socket, options, head) {
  // add custom header
  proxyReq.setHeader('X-Special-Proxy-Header', 'foobar');
}