关于vue3、vite项目中dev环境的proxy 代理真实地址展示

前端dev环境中难免会遇到接口跨域毕竟我们 localhost 怎么可能访问 接口地址。这时候就需要配置 proxy，常见的设置方式就是在 vite.config 文件配置。到目前为止是不是都式小儿科，谁不知道是的。直到我遇到后端灵魂发问，因为配置了代理那么我们在 Network 中看到的请求并不是真实的地址，如图：

到这里都没有问题。

有问题的是此刻接口真实的请求地址是什么，谁知道呢。这就是后端同志在看到页面时的提问，谁都不能在第一时间确定代理的地址对不对。经过不断百度找到了。可在 proxy 配置 bypass 参数设置请求头 x-req-proxyUrl

完美回答最初的问题，很开心。

    server: {
      host: true,
      https: false, //是否启用 http 2
      cors: true, //为开发服务器配置 CORS , 默认启用并允许任何源
      open: false, //服务启动时自动在浏览器中打开应用
      port: 9000,
      strictPort: false, //设为true时端口被占用则直接退出，不会尝试下一个可用端口
      force: true, //是否强制依赖预构建
      hmr: true, //禁用或配置 HMR 连接
      proxy: {
        '/api': {
          // target: 'http://192.168.100.26:8011', // 开发环境
          // target: 'http://192.168.3.90:8011', // 联调本地服务器
          //  target: 'http://192.168.100.133:42091', // 开发环境
          target: 'http://192.168.100.66:42091', // 测试环境
          // target: 'http://120.26.38.129:42091', // 拉练环境
          // target: 'http://47.98.145.160:42091', // 拉练环境
          changeOrigin: true,
          rewrite: path => path.replace(/^\/api/, ''),
          bypass: function (req, res, options) {
            // 设置代理转发前缀
            const proxyUrl = new URL(options.rewrite(req.url) || '', options.target)?.href || '';
            res.setHeader('x-req-proxyUrl', proxyUrl);
          }
        }
      }
    },