vue3 借助vite配置了proxy代理情况，查看真实的接口调用地址方法

aPurpleBerry2024-08-20 19:04

参考 https://blog.csdn.net/weixin_43606158/article/details/132436745

在浏览器查看请求头和响应头发现只有代理前的url，没有显示代理后的路径

vite.config.ts

javascript 复制代码

    server: {
      proxy: {
        [env.VITE_APP_BASE_API]: {
          target: env.VITE_SERVE, //获取数据的服务器地址设置
          changeOrigin: true, //需要代理跨域
          rewrite:(path)=>path.replace(/^\/api/,''),// 路径重写 不要api的意思
          bypass(req, res, options) {
            //@ts-ignore
            const proxyUrl = new URL(options.rewrite(req.url) || '',(options.target)as string)?.href || '';
            console.log(proxyUrl);
            req.headers['x-req-proxyUrl'] = proxyUrl
            res.setHeader('x-res-proxyUrl',proxyUrl)
          },
        }
      }
    }

在控制台的header中就能查看到了
补充一下这个完整路径的由来

登陆按钮在login/index.vue中，点击后的回调函数里调用pinia仓库（user仓库）提供的登录接口userLogin，同时传递数据过去。

仓库中的userLogin，是调用了api接口的方法

api接口使用的axios是经过二次封装之后的，axios有基本路径baseURL（源自env.development），以及请求路径（仓库调用时传参）。

此时的路径是/api/user/login。发送请求时，通过vite代理，在前面加上env.VITE_SERVE，同时rewrite。