问题
使用vue-cli3.0的proxy去代理多个服务时,发现有个别代理不成功,但是替换其代理的位置反而成功,比如如下情况:
- 如下三个代理设置: (1)第一个"/api"; (2)第二个"/apipc"; (3)第三个"/huangyi";
- 依次调用接口如下: 3.依次请求结果如下: 发现只有"/api"代理地址的接口请求成功。
修改
- 调整代理顺序:
- 调用接口不变如上步骤2;
- 请求结果如下: 发现全部接口请求成功。
- 再调整回原来的顺序,并按照如下修改:
- 调用接口仍旧不变,请求结果如下: 发现只有"/apipc"代理地址的接口请求失败,其他两个代理地址的接口都访问成功。
- 在4的基础上再修改如下:
- 调用接口相应修改如下,只改"/apipc"那个接口,其他两个不动:
- 请求结果同3:全部接口请求成功。
总结
- proxy设置代理,其地址匹配是根据正则匹配,可以看到文中开始设置了如下三个代理,且顺序如下:
- "/api"
- "/apipc"
- "/huangyi"
- 对应请求的三个接口如下:
- "/api/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg"
- "/apipc/cgi-bin/musicu.fcg"
- "/huangyi/music/api/getDiscList"
结果: 发现三个接口中都包含"/api",所以访问时正则匹配都会转到第一个的"/api"代理,这样就导致后面两个接口访问不成功;
- 当将代理改成如下,表示匹配以如下开头的接口:
- "^/api"
- "^/apipc"
- "^/huangyi"
结果: 发现三个接口中有两个都以"/api开头",所以当访问"/apipc/cgi-bin/musicu.fcg"这个接口时正则匹配都会转到第一个的"^/api"代理,这样就导致该接口访问不成功;
- 当将"^/apipc/"代理改成别的名字"^/pc",这样三个接口都对应匹配到个子接口,结果请求接口都成功;
参考链接
具体可以查看vue-cli3.0 proxy使用http-proxy-middleware的官方文档的说明