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

参考 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。

相关推荐
哆啦A梦15885 小时前
搜索页面布局
前端·vue.js·node.js
_院长大人_6 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
SevgiliD6 小时前
el-table中控制单列内容多行超出省略及tooltip
javascript·vue.js·elementui
哆啦A梦15887 小时前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫7 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
爱看书的小沐8 小时前
【小沐杂货铺】基于Three.js渲染三维风力发电机(WebGL、vue、react、WindTurbine)
javascript·vue.js·webgl·three.js·opengl·风力发电机·windturbine
罚时大师月色10 小时前
Vue+ts 如何实现父组件和子组件通信
javascript·vue.js·ecmascript
fury_12310 小时前
vue3:数组的.includes方法怎么使用
前端·javascript·vue.js
宁&沉沦11 小时前
Cursor 科技感的登录页面提示词
前端·javascript·vue.js
武天11 小时前
如果使用Vue3.0实现一个 Modal,你会怎么进行设计?
vue.js