参考 https://blog.csdn.net/weixin_43606158/article/details/132436745
在浏览器查看请求头和响应头发现只有代理前的url,没有显示代理后的路径
- vite.config.ts
server: {proxy: {[env.VITE_APP_BASE_API]: {target: env.VITE_SERVE, //获取数据的服务器地址设置changeOrigin: true, //需要代理跨域rewrite:(path)=>path.replace(/^\/api/,''),// 路径重写 不要api的意思bypass(req, res, options) {//@ts-ignoreconst proxyUrl = new URL(options.rewrite(req.url) || '',(options.target)as string)?.href || '';console.log(proxyUrl);req.headers['x-req-proxyUrl'] = proxyUrlres.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。