使用Charles抓取Http/Https请求包

臻同学
1,501 阅读2分钟
原文链接： mp.weixin.qq.com
使用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 前端常用设计模式 前端面试汇总
avatar
文章
阅读
粉丝