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