通過抓包軟件Charles和Fiddle快速模擬(Mock)數據

使用Charles實現本地數據mock

由於在實際開發中，一般進行前后端分離，通過接口來進行數據交互。所以我們使用charles-proxy來進行模擬數據接口。Charles能夠抓取瀏覽器發起的請求，然后做出一些處理和返回。官網下載
配置參考

注冊賬號(不注冊的話，30天會過期，每隔一段時間會關閉一次) 賬號：https://zhile.io 密碼：48891cf209c6d32bf4

配置接口文件

在本地創建接口文件返回的json文件，通過charles配置訪問地址返回對應的json文件

設置charles

菜單Tools -> Map Local. 勾選Enable Map Local，點擊Add按鈕新增一個接口，選擇對應返回的json文件

Protocol: http
Host: localhost.charlesproxy.com
Port: 3000
Path: /api/todolist // 根據不同的地址返回對應的數據
Query: // 參數

注意：Host選項如果只寫 localhost，會出現瀏覽器訪問時出現404，經過查看發現charles能抓取線上的包，但是不能抓取本地的包，那么把我們想要訪問的接口掛到 localhost.charlesproxy.com:3000域名下，就能訪問了。官方說明

修改hosts文件對127.0.0.1 進行映射，host文件在c:\windows\system32\drivers\etc 下。快速進入hosts文件夾的方法。同時按下Win+R組合鍵，調出運行欄，輸入 c:\windows\system32\drivers\etc 確定即可打開對應的文件夾。

發起請求，會遇到跨域問題

axios.get('http://localhost.charlesproxy.com:3000/api/todolist')
.then((res) => {
    console.log(res);
})
.catch((error) => {
	console.log(error);    
})
// 在控制台中會提示一下錯誤：
// 雖然ajax訪問接口能正常的獲取到數據，並成功得到202，但是返回結果仍為error，查看以下錯誤Access to XMLHttpRequest at 'http://localhost.charlesproxy.com:3000/api/todolist' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.，發現出現跨域問題。 

Charles配置解決跨域

跨域資源共享 CORS 詳解（ 阮一峰）

解決方法：使用charles的rewrite修改options請求的response header

• 點擊Tools -> Rewrite
• 添加rewrite配置

  1. 開啟Enable Rewrite

  2. 點擊左邊add添加rewrite配置

  3. 設置名稱，點擊第一個模塊中的add，添加location，什么不填寫點擊確定匹配所有

  4. 設置請求頭：點擊第二個模塊中的add，添加Type：add header 和 response status

     修改Header下的四個字段：

     Access-Control-Allow-Origin: *

     Access-Control-Allow-Methods: GET,POST,OPTIONS

     Access-Control-Allow-Headers: Accept,Origin,X-Requested-With,Content-Type,Last-Modified

     Allow: GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH

     選擇Type為Add Header， 勾選Response，設置Replace中的Name和Value，勾選Replace all。

     選擇Type為Response Status，勾選Response，勾選Match whole value

Charles破解：

• 從這個網站生成破解后的charles.jar文件

• 替換本地charles.jar文件即可

  windows: c:\Program Files\Charles\lib\

Fiddle快速模擬mock

• 創建訪問接口返回的json文件
• 選中目標信息，點擊autoresponde，勾選下面對應的3個復選框，點擊Add Rule添加訪問路徑對應返回的數據。
• Fiddle下載地址

// 編輯Rule Editor
// 設置請求地址
EXACT:http://localhost:3000/api/getTodoList
// 對應請求地址輸出的數據
c:\Users\chinatime\Desktop\mock\data.json
// 點擊保存即可