跨域代理请求显示真实请求地址

在我们刚接触开发的时候，肯定会遇到跨域(跨域原理)的问题，这个时候工作中常见的就是使用proxy，代理到真实环境，不过需要注意，代理后是不会显示真实地址! 是不会显示真实地址！ 在浏览器的控制台中你看到的请求还是http://localhost:xxxx/xxx

这个时候新手就经常分不清楚，我到底有没有代理，代理到哪里去了，特别是接口报错的时候，你去问后端，后端说我在postman是可以的，就经常犯迷糊。这个时候需要准确的理解proxy中各个字段的意思，才能知道这个api/banner/list请求代理到哪里去了，如果这个时候能有一个字段准确的显示代理后的请求，我相信就算不懂那些字段啥意思，试也可以试出来。就像下面这样

我们只要在代理的时候加上这段代码就能在请求头上显示这个真实请求地址

在Vue2x中

onProxyRes: function (proxyRes, req, res) { // 代理response事件
  let target = 'http://google.com'; // 这个地址写你想要代理到的地址
  let realUrl = target + req.url;
  proxyRes.headers['x-real-url'] = realUrl;
  console.log(proxyRes.headers, res)
}

在Vue3x中

configure: (proxy, options) => {
  // proxy 是 'http-proxy' 的实例
  proxy.on('proxyRes', (proxyRes, req,) => {
    let target = 'http://127.0.0.1:5000';
    let realUrl = target + req.url;
    proxyRes.headers['x-real-url'] = realUrl;
  })
}

在React中，使用的cra创建

onProxyRes: function (proxyRes, req, res) { // 代理response事件
    let target = 'http://127.0.0.1:5000'; // 这个地址写你想要代理到的地址
    let realUrl = target + req.url;
    proxyRes.headers['x-real-url'] = realUrl;
    console.log(proxyRes.headers, res)
}