vue项目设置proxy代理，客户端或浏览器如何去查看代理地址

在 Vue 项目中，通过 vue.config.js 配置的 Proxy 代理 主要用于开发环境（DevServer）解决跨域问题，代理请求会在本地开发服务器（如 webpack-dev-server）层面转发，浏览器或客户端无法直接看到代理后的真实请求地址，因为代理是在服务端完成的。但可以通过以下方法间接验证代理是否生效以及查看代理地址。

 proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: "http://xxxxxx:8080",
        changeOrigin: true,
        onProxyRes(proxyRes, response) {
          const realUrl = new URL(response.url, "http://xxxxxx:8080").href
          proxyRes.headers['x-real-url'] = realUrl
        },
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }

这样就可以在控制台看到

image.png