charles重定向請求map

charles是一款mac下**除錯工具，對於前端開發同學來說是相當方便的乙個除錯介面的工具；不過charles需要收費，不過在**幾乎收費的軟體都能找到破解方法；

使用charles前，需要將charles設定成mac os的網路系**伺服器，這樣charles就可以捕獲到mac上所有的網路請求，然後charles在做些手腳（如map和rewrite功能）就可以很輕鬆的實現介面的除錯。

至於charles的具體使用可以在網上查閱其具體使用，本文就來說說在使用charles除錯過程中相當重要的map和rewrite功能，這也前端除錯介面用到charles最多的功能。

map功能，顧名思義就是將某個請求進行重定向，用重定向後的內容來響應請求的內容；

map功能分為map local和map remote,二者區分是：

在使用map功能時，本人最常見的使用場景簡要說明如下：

html重定向：在開發過程中由於本地沒有資料，那麼可以使用測試環境的資料進行開發而不用mock資料，這時可以訪問測試環境的某個頁面，然後將其頁面的html重定向到本地的某個頁面來獲取測試資料。

頁面結構可能如下面這樣，有3個js引用，前面2個js為每個頁面公共的js，最後乙個js為當前頁的業務邏輯js：

這時，將上面頁面的html重定向到本地的開發頁面html，由於本地頁面的3個js有2個是公共的，所以他會載入測試環境的對應js，這時需要將業務邏輯的js也需重定向到本地js，這樣就可以開發了；

他只用了2個重定向操作實現：可以實現本地開發，避免mock資料；否則需要多個重定向而且還需要自己mock資料。

除了單個map隱射外，還可以使用*萬用字元進行批量匹配，不用乙個個建立重定向了。下面舉乙個實戰的例子。

在本人的某個專案開發中，本地開發因為沒有資料，需要相應環境的資料，所以就需要將本地請求資料的api介面map remote到車上環境來獲取測試資料而不用進行大量的mock資料，因為涉及系統涉及到的資料api介面比較多，每個都進行單獨重定向的話，效率太低；

而非資料api介面的請求不需要重定向，那麼涉及到的問題是：

具體的charles配置如下圖所示：

注意上面map from中的path配置項使用了*萬用字元，表示匹配127.0.0.1:8080/api/下的所有檔案及子路徑，將其重定向到cmstest.intra.xiaojukeji.com下的/api/路徑下

上面的配置通過map remote就是實現了區別對待本地系統的不同請求，將指定路徑下的請求重定向到指定的環境，配置完成後看到所捕獲的請求資訊如下圖所示。

這說明配置已經生效，那麼本地開發，測試環境資料就可以看到了，剩下的就可以愉快的開發專案了，是不是超讚啊！

補充一下map隱射的相關功能

host配置值

path配置值

配置產生的結果

charlesproxy.com

匹配所有的請求重定向到charlesproxy.com主機

*.charlesproxy.com

匹配所有的請求重定向到以.charlesproxy.com結尾的主機

charlesproxy.com

/charles/

匹配所有請求只重定向到charlesproxy.com/charles/路徑下

charlesproxy.com

/charles/*

匹配所有請求只重定向到charlesproxy.com/charles/路徑下,包括路徑下的檔案及其路徑的子路徑

charlesproxy.com

/charles

匹配所有請求只重定向到charlesproxy.com/charles下

charlesproxy.com

/index.html

匹配所有請求重定向到charlesproxy.com/index.html

/charles/*.html

匹配所有請求重定向到任意主機下的以.html結尾的檔案，該檔案存放在主機的/charles/及其子目錄下