vue proxy匹配规则

问题

使用vue-cli3.0的proxy去代理多个服务时，发现有个别代理不成功，但是替换其代理的位置反而成功，比如如下情况：

1. 如下三个代理设置： (1)第一个"/api"; (2)第二个"/apipc"; (3)第三个"/huangyi";

   

2. 依次调用接口如下：

   

   

   

   3.依次请求结果如下：

   

   

   

   发现只有"/api"代理地址的接口请求成功。

修改

1. 调整代理顺序：

   

2. 调用接口不变如上步骤2;
3. 请求结果如下：

   

   

   

   发现全部接口请求成功。
4. 再调整回原来的顺序，并按照如下修改：

   

5. 调用接口仍旧不变，请求结果如下：

   

   

   

   发现只有"/apipc"代理地址的接口请求失败，其他两个代理地址的接口都访问成功。
6. 在4的基础上再修改如下：

   

7. 调用接口相应修改如下，只改"/apipc"那个接口，其他两个不动：

   

8. 请求结果同3：全部接口请求成功。

总结

1. proxy设置代理，其地址匹配是根据正则匹配，可以看到文中开始设置了如下三个代理,且顺序如下：

• "/api"
• "/apipc"
• "/huangyi"

2. 对应请求的三个接口如下：

• "/api/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg"
• "/apipc/cgi-bin/musicu.fcg"
• "/huangyi/music/api/getDiscList"

结果： 发现三个接口中都包含"/api"，所以访问时正则匹配都会转到第一个的"/api"代理，这样就导致后面两个接口访问不成功；

3. 当将代理改成如下，表示匹配以如下开头的接口：

• "^/api"
• "^/apipc"
• "^/huangyi"

结果： 发现三个接口中有两个都以"/api开头"，所以当访问"/apipc/cgi-bin/musicu.fcg"这个接口时正则匹配都会转到第一个的"^/api"代理，这样就导致该接口访问不成功；

4. 当将"^/apipc/"代理改成别的名字"^/pc"，这样三个接口都对应匹配到个子接口，结果请求接口都成功；

参考链接

具体可以查看vue-cli3.0 proxy使用http-proxy-middleware的官方文档的说明 http-proxy-middleware