使用Charles抓取Http/Https請求包

使用Charles抓取Http/Https請求包

 

 

一、前言

之前寫項目的時候遇到很奇怪的問題,pc上調試後端的接口返回是正常的數據,放在真機(當時是ios手機)上就會少一些數據,浪費了很多時間,最後還是通過抓包找到問題。這裏就分享給大家抓包教程,用的也是charles,之前有寫過一篇使用charles實現本地數據mock,有興趣的朋友可以看下。

 

二、抓取Http請求

  1. 獲得電腦的ip地址(可以使用cmd的ipconfig或者 在charles中查看 :Help -> Local IP Address)

  2. Charles代理設置

    打開Charles的代理設置:Proxy->Proxy Settings,設置一下端口號,默認的是8889,這個只要不和其他程序的衝突即可,並且勾選Enable transparent HTTP proxying。

  3. 在手機設備、模擬器或者遠程瀏覽器上設置代理,抓取手機設備上的請求包

    android:在手機wifi 上設置代理 -> 長按無線網絡-->修改網絡-->高級選項-->代理 手動-->手動輸入輸入IP、端口號

    服務器IP:PC機器的IP(通過步驟1獲取的ip)

    端口號:8889(通過之前介紹的查看端口的方法)

    ios:如下圖操作步驟

    存儲後charles會彈出下面這個對話框,點擊allow 

  4. 真機請求接口後charles就能抓取到請求。

 

三、抓取Https請求

抓取https數據需要在手機上安裝證書,HTTPS的抓包需要在HTTP抓包基礎上再進行設置

1.安裝證書,步驟如下

用手機自帶的瀏覽器輸入chls.pro/ssl,下載並安裝證書,拿蘋果手機爲例:

 

2.Charles設置Proxy代理

3.https請求就能抓取到了

 

總結:如果在開發中遇到pc端和真機請求數據返回不一致的情況,可以使用抓包查看問題哦

 

往期精彩回顧

React組件與生命週期

React函數組件和Class組件以及Hooks

適合中級前端的react面試題

2020年最火爆的Vue.js面試題

使用Charles實現本地數據mock

前端常用設計模式

前端面試彙總

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章