vue proxy代理^号问题

vue proxy代理的^号问题?

今天遇到一个很头疼的问题,还有就是一直以来对vue的代理理解得还不是很透彻,花了大半天的时间,勉强理解了下。
转发 https://www.jb51.net/article/260242.htm
首先放链接,里面说的代理都是vue-cli3模式才能用,
如右图vue-cli2模式的拦截路径不支持写 ^,只能是写拦截头,在这里插入图片描述
pathRewrite两个版本写法都一样兼容(都可以带^);
例如,要代理的接口路径为,/system-platform/sys/permission
vuecli3可以匹配/system-platform、/sys,/permission、/sy 都行,
vuecli2只能是第一个写起 /xxxxx 可以是/,/s,/sy,不能是/permission,/sys/
注意,这里的/sys,匹配的是/system-platform的/sys,很容易误解,,如果要匹配第二个sys,则要写成/sys/(因为两处字符相同,匹配的是位置靠前的字符,不是单词!!!)
注意,这里的拦截路径不一定为整个单词,与之匹配的都可以。例如/sy,/s,
还有:示例:系统有两批接口,但项目设置了基础路径写死为/system-platform
第一批接口为/sys/xxxxxx,要请求到/system-platform/sys/xxxxxx(刚好设置了基础路径请求正常)
第二批接口为/material-store/xxxx,要请求到/material-store/xxxx(因为设置了基础路径,请求变成/system-platform/material-store/xxxx,请求不成功)
然后进行代理,如下图,要把两批接口分别匹配拦截。如果第一个写/sys,那么匹配到的
还是/system-platform中的/sys,所以第一批请求正常,第二批/system-platform/material-store/xxxx还是被/sys匹配成功了,没有到第二个代理中去。所以要把两批接口分开代理的话,第一个匹配就要写成/sys/,匹配到路径中的第二个sys去,这样/material-store就不会被/sys影响

在这里插入图片描述
第一批接口
在这里插入图片描述
第二批接口
在这里插入图片描述**

Vue中,可以使用代理proxy)配置来实现服务器代理代理配置可以在项目的vue.config.js文件中进行设置。通过使用代理,可以将前端请求发送到指定的后端接口地址。代理配置可以根据请求路径的不同进行匹配,并将请求转发到对应的后端接口。 在vue.config.js文件中,通过devServer的proxy属性来配置代理。可以为不同的请求路径设置不同的target(后端接口地址),changeOrigin(改变请求源),ws(启用WebSocket代理),secure(禁用安全检查)等属性。 例如,如果需要将请求路径以/abc开头的请求代理到http://XX.XX.XX.XX:8081这个后端接口地址,可以在proxy中进行如下配置: ```javascript devServer: { proxy: { "/abc": { target: "http://XX.XX.XX.XX:8081", changeOrigin: true, ws: true, secure: false } } } ``` 这样,在前端发送的请求中,以/abc开头的请求将被代理到http://XX.XX.XX.XX:8081这个后端接口地址。 另外,如果需要监测多个接口并进行代理,可以在proxy中写多个配置,每个配置对应一个目标后端接口地址。例如: ```javascript devServer: { proxy: { "/zzz": { target: "http://XX.XX.XX.XX:8082", changeOrigin: true, ws: true }, "/xxx": { target: "http://XX.XX.XX.XX:8083", changeOrigin: true, ws: true } } } ``` 这样,请求路径以/zzz开头的请求将被代理到http://XX.XX.XX.XX:8082这个后端接口地址,而请求路径以/xxx开头的请求将被代理到http://XX.XX.XX.XX:8083这个后端接口地址。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值