vue proxy匹配规则

问题

使用vue-cli3.0的proxy去代理多个服务时,发现有个别代理不成功,可是替换其代理的位置反而成功,好比以下状况:vue

  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"
  1. 对应请求的三个接口以下:
  • "/api/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg"
  • "/apipc/cgi-bin/musicu.fcg"
  • "/huangyi/music/api/getDiscList"

结果: 发现三个接口中都包含"/api",因此访问时正则匹配都会转到第一个的"/api"代理,这样就致使后面两个接口访问不成功;git

  1. 当将代理改为以下,表示匹配以以下开头的接口:
  • "^/api"
  • "^/apipc"
  • "^/huangyi"

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

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

参考连接

具体能够查看vue-cli3.0 proxy使用http-proxy-middleware的官方文档的说明 http-proxy-middlewarevue-cli

相关文章
相关标签/搜索