不论是vue.config.js还是vite.config.js中都有前端跨域的配置。 vue.config.js中有
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
}
}
问:pathRewrite
里面的 '^/api'
是什么意思
答:用代理首先你得有一个标识,表明你的这个连接要使用代理,不然的话 html
css
js
这些静态资源都跑去代理。
/api
就是告诉 node
,我接口用 /api
开头的才使用代理,所以接口都写成 /api/xx/xx
,最后代理的路径就是 http://localhost:3000/api/xx/xx
可是不对呀,我正确的接口路径里面是没有 /api
的,所以就需要 pathRewrite
, 用 ^/api: ''
把 /api
去掉,这样既能有正确的标识,又能在请求接口的时候去掉 /api
注:在浏览器的DevTools中查看接口,并不能显示出来真实的代理路径。
拆解一下DevTools中Request URL, http://localhost:1840
,这是发起请求的服务地址 /api/user/login
,这是请求的路径地址, 而真实的请求地址实际为: http://localhost:3000/user/login
以上,有参考至:https://www.cnblogs.com/hanguidong/p/9460495.html