使用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

前端常用设计模式

前端面试汇总