PC 端 http 資源抓包 （Mac 電腦示范）

1. 下載 charles 軟件 https://www.charlesproxy.com/download/

2. 打開 charles，選擇 Proxy－Mac OS X Proxy，這樣，瀏覽器刷新頁面，http 資源就可以打印到 charles 里面。如圖：

   
   
   image.png
3. charles 反復重新登錄解決辦法：
   第一：激活注冊碼：https://www.zzzmode.com/mytools/charles/
   第二：charles——》Hepl，選擇第一個選項，輸入RegisterName和注冊碼即可。

PC 端 https 資源抓包 （Mac 電腦示范）

1. 安裝證書：

   
   
   image.png
   
   
   image.png
   
   
   image.png

2. 選擇 Proxy － SSL Proxying Settings 選項，在 SSL Proxying 這塊，新加一個 *443 , 這樣，就完成 https 的抓包啦

   
   
   image.png
   
   
   image.png

手機抓包的過程

1. 手機安裝證書：
   1. 手機連接電腦Ip地址
   2. 手機瀏覽器打開http://charlesproxy.com/getssl 或者 chls.pro/ssl
      ，進行安裝
2. 手機安裝的證書需要進行認證，通用-關于本機-證書信任設置
3. iphone為列：設置－無線局域網－點擊wifi 最右邊－配置代理－手動；輸入 IP地址和端口號，點擊保存即可

4. 接下來，就可以去 app 端里，抓請求啦

   
   
   image.png
   
   
   image.png

charles Mock 數據操作

1. charles 抓到請求的數據，選擇接口，右鍵－Map Local ；選擇本地一個json 即可完成mock

   
   
   image.png
   
   
   image.png

手機端訪問頁面，以及接口mock代理，charles 解決跨域

1. 選擇 Tools－Rewrite，里面對應的內容都填寫ok，點擊 Apply 就解決啦

   
   
   image.png
   
   
   image.png
   
   
   image.png
   
   
   image.png

上圖里面的內容：大家可以直接復制到對應的里面即可

name：跨域
Rules：
1. Type：Remove Header
勾選 Response 
Match：
     Name：Access-Control-Alloq-Origin

2. Type: Add Header
勾選 Response
Replace:
     Name: Access-Control-Allow-Origin
     Value: ＊
勾選 Replace All

3. Type: Remove Header
勾選 Response
Match:
     name: Access-Control-Allow-Credentials
勾選 Replace All

瀏覽器解決跨域

chrome 瀏覽器可以安裝一個插件：Allow-Control-Allow-Origin

image.png

ios 手機無法安裝證書解決辦法請查看

這是我個人工作總結的。不對的還希望和大家一起指正學習！