charles前端應用
我們在開發移動端頁面的時候，抓包是必不可少的除錯手段。抓包工具推薦使用charles，介面簡潔、功能強大、配置靈活，走過路過不要錯過。這篇文章總結一下charles的主要功能以及能幫助我們解決的問題。
Rewrite
Charles上的解釋為 Modify Requests and Responses as they pass through Charles , 當請求經過charles時去修改請求或者響應。通過Rewrite，我們可以很輕鬆地修改某個請求的請求和響應來達到我們的目的。我們開發中有一個問題是比較頭疼的，就是登入校驗問題。有兩種場景很不方便：第一是我們在本地啟動伺服器，除錯測試環境的資料，先假設你在本地用一些方法可以訪問到測試環境的介面，但這時候介面有登入校驗，就無法訪問到資料，流程走不下去；第二種是我們做hybird app，在app內巢狀wap頁面，使用app的登入介面，只有在app內才有登入狀態，如果我們想在電腦上進行除錯，也會受到登入校驗的限制。解決這個問題的辦法就是我們要在本地模擬登入狀態，因為現在絕大多數的網站的登入都是使用cookie來實現的，只要我們把正確的登入cookie嵌入到我們的請求中，那我們的請求就是有登入狀態的。我們使用Rewrite就可以輕鬆解決這個問題。
我們可以在Tools -> Rewirte開啟視窗，介面如下：
圖中分3塊區域：
- 規則，你可以自定義多套規則，一套規則包括對哪些url進行哪些修改。
- url集，你可以配置對那些url進行修改
- 具體的修改規則
上圖中可以看出，我配置了一套規則，針對主站內所有url進行修改，修改規則為兩條，下面我們來看一下這兩條規則如何配置。
第一條規則配置如下：
可以看到配置很簡單，Type選的是Add Header,即新增一個請求頭。然後把登入的cookie填到下面，然後就可以愉快的以登入狀態在本地訪問測試或者線上環境了。但是有一個不好的地方，cookie一般都有時效，所以時效的時候，你要重新更改配置中的cookie。
第二條規則是為了解決一個編碼問題，我在除錯過程中遇到一些請求返回的json字串在charles中顯示為亂碼，但是程式碼執行結果正常，抓包發現這些亂碼的請求的響應頭accept-encoding為gzip,deflate,br，有一個br編碼方式，服務端會優先採用br來編碼，而charles貌似不識別這種編碼，所以我在這條規則中將br去掉，這樣就可以正常顯示返回的json字串，規則如下：
Rewrite還有很多其他的用法，比如新增請求資料、修改請求資料、修改請求狀態碼等等。
Map Remote
Charles上的解釋為 Modify the request location to map one remote location to another 。就是把一個請求對映到另一個遠端請求上。我們可以通過這個功能，將本地的請求對映到測試/線上環境的請求中。一般我們本地的服務都是以ip開頭的，我們寫介面的時候，有兩種寫法：
www.example.com/api/getData /api/getData
一般情況下采用第二種，比較靈活，這時候我需要配置一下映射了：
我這裡配置的是，所有本地/api/下的請求都對映到 www.example.com/ 域名下，開發者可以根據自己情況自行配置。這其中有一個問題是本地服務的介面和線上的介面需要分開，不能把本地服務也對映到線上域名上去，區分方法一般是在線上介面加一個字首欄位，比如我這裡的/api/，這個可以和後臺約定一下，如果後臺不配合，你可以在本地開發環境自己加一個字首。這樣我們就可以在本地去訪問線上資料了，配合Rewrite，有登陸校驗的介面也是可以訪問的。