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