目錄

寫在前面

概述前端打包工具

直入主題pathRewrite

寫在前面

近日來，連續高壓的做專案，都沒時間來寫點東西，今天瀏覽帖子時發現好多同學在問proxy使用pathRewrite重寫路徑時不生效的問題，一時興起就想寫篇文章告訴還不清楚的同學們。

概述前端打包工具

由於近些年來react、vue等MVVM框架的流行，使得前端的打包工具更傾向於webpack，相比傳統的打包工具gulp，grunt等，webpack對於使用vue、react等構建的單頁面應用有著超強的親和力，再加上前端模組化的大趨勢，webpack對於處理模組化有著天生的神力，由此webpack自然從眾多的打包工具中脫穎而出。

直入主題pathRewrite

簡單來說，pathRewrite是使用proxy進行代理時，對請求路徑進行重定向以匹配到正確的請求地址，話不多說，上程式碼，我們先來看看不使用pathRewrite的配置：

proxy: {
  '/csdn': {
      target: 'https://blog.csdn.net',
      changeOrigin: true
   }
}

如上所示，我們現在想請求CSDN中某一個頁面的某個介面，配置代理如上，請求程式碼附上：

axios.get("/csdn/u014427391/article/getSideArticles?                    
         pageindex=3&articleId=84980219&length=20")
         .then(function(response) {
           console.log(response);
         });
 

如上所示，我們簡單的使用axios進行請求。實際上，我們要請求的介面地址是：“https://blog.csdn.net/u014427391/article/getSideArticles?pageindex=3&articleId=84980219&length=20”，配置代理"/csdn"對應的target為:"https://blog.csdn.net"，那麼當我們不使用pathRewrite進行路徑重定向的時候，加入我們像上述axios的程式碼那樣進行請求時，我們程式碼中的GET請求是"/csdn/u014427391/article/getSideArticles?pageindex=3&articleId=84980219&length=20"，此時由於proxy的配置，此請求會被代理成"

其實，不難看出，當我們配置了代理後，我們請求的地址前面會自動的加上我們所代理的地址，就上述我們的配置舉個例子來說，就是，當我們程式碼中請求的地址是"/csdn/abc"的時候，我們真實請求的地址是"https://blog.csdn.net/csdn/abc"(前面會自動的加上我們所代理的地址)。

迴歸到最初的例子，當我們請求"/csdn/u014427391/article/getSideArticles?pageindex=3&articleId=84980219&length=20"時，我們實際上請求的是"https://blog.csdn.net/csdn/u014427391/article/getSideArticles?pageindex=3&articleId=84980219&length=20"，而真實的正確地址是"https://blog.csdn.net/u014427391/article/getSideArticles?pageindex=3&articleId=84980219&length=20"，由此發現多了個"/csdn"，由此導致瀏覽器報404的錯誤，所以由此分析，我們需要去掉請求路徑中多餘的"/csdn"，此時我們就需要用到pathRewrite進行路徑的重定向了。直接上程式碼如下：

proxy: {
      '/csdn': {
        target: 'https://blog.csdn.net',
        changeOrigin: true,
        pathRewrite: {
          '^/csdn': '/'
        }
      }
    }

我們加了路徑的重定向程式碼pathRewrite，上述程式碼以正則匹配規則將以"/csdn"開頭的請求地址修改為""，也就是說，我們這樣配置後，當我們請求"/csdn/abc"的時候，會被重寫為請求"/abc"，直接在請求地址中將"/csdn"變成了""，由此剛好去掉了請求地址中多餘的"/csdn"，由此，上述的404錯誤就得到了解決。

純屬個人理解，如有不同意見的大神，望指教。