使用Charles抓取Http/Https请求包

分手后的思念是犯贱 2023-07-06 06:18 140阅读 0赞

# 使用Charles抓取Http/Https请求包 #

![format_png][]

## 一、前言 ##

之前写项目的时候遇到很奇怪的问题，pc上调试后端的接口返回是正常的数据，放在真机（当时是ios手机）上就会少一些数据，浪费了很多时间，最后还是通过抓包找到问题。这里就分享给大家抓包教程，用的也是charles，之前有写过一篇使用[charles实现本地数据mock][charles_mock],有兴趣的朋友可以看下。

## 二、抓取Http请求 ##

1.  **获得电脑的ip地址**（可以使用cmd的ipconfig或者 在charles中查看 ：Help -> Local IP Address）
    
    ![format_png 1][]
    
    ![format_png 2][]
2.  **Charles代理设置**
    
    打开Charles的代理设置：Proxy->Proxy Settings，设置一下端口号，默认的是8889，这个只要不和其他程序的冲突即可,并且勾选Enable transparent HTTP proxying。
    
    ![format_png 3][]
    
    ![format_png 4][]
    
    ![format_png 4][]
3.  **在手机设备、模拟器或者远程浏览器上设置代理**，抓取手机设备上的请求包
    
    android：在手机wifi 上设置代理 -> 长按无线网络-->修改网络-->高级选项-->代理 手动-->手动输入输入IP、端口号
    
    服务器IP：PC机器的IP（通过步骤1获取的ip）
    
    端口号：8889（通过之前介绍的查看端口的方法）
    
    ios:如下图操作步骤
    
    ![format_png 5][]
    
    ![format_png 6][]
    
    ![format_png 7][]
    
    存储后charles会弹出下面这个对话框，点击allow 
    
    ![format_png 8][]
4.  **真机请求接口后charles就能抓取到请求。**
    
    ![format_png 9][]

![format_png 9][]

## 三、抓取Https请求 ##

抓取https数据需要在手机上安装证书，HTTPS的抓包需要在HTTP抓包基础上再进行设置

1.安装证书，步骤如下

![format_png 10][]

![format_png 11][]

用手机自带的浏览器输入chls.pro/ssl，下载并安装证书，拿苹果手机为例:

![format_png 12][]

![format_png 13][]

![format_png 14][]

2.**Charles设置Proxy代理**

**![format_png 15][]![format_png 15][]**

![format_png 16][]

![format_png 17][]

3.https请求就能抓取到了

![format_png 18][]

总结：如果在开发中遇到pc端和真机请求数据返回不一致的情况，可以使用抓包查看问题哦

![format_png 19][]

▼

往期精彩回顾

▼

[React组件与生命周期][React]

[React函数组件和Class组件以及Hooks][React_Class_Hooks]

[适合中级前端的react面试题][react]

[2020年最火爆的Vue.js面试题][2020_Vue.js]

[使用Charles实现本地数据mock][charles_mock]

[前端常用设计模式][Link 1]

[前端面试汇总][Link 2]

![format_png 20][]

![format_png 21][]

![format_png 22][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy83UVJUdmtLMnFDNHZuendhSmRIYzROYzF4b1p2dEt3V0w5Q0x1V2J5YlpUcUZpYVBQY0c1TUsyYzZhem1aVUZaV2pTVmUyQmF6aWFxc1RGNXE2RW5UenZBLzY0MA?x-oss-process=image/format,png
[charles_mock]: http://mp.weixin.qq.com/s?__biz=MzU3MTg0MDUyNA==&mid=2247483821&idx=1&sn=106c1032e71f851c0ca83766560f97b8&chksm=fcdb40cecbacc9d8b42a47032f642f7ebfcb263a7819494258d3b6f6d95f345ceaf5a0eaae92&scene=21#wechat_redirect
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL3N6X21tYml6X3BuZy9LU3lZZVBESjVIdDhCT3ppY1dpYmY4M2liOGpDZzhSN1ZueWpuZldpYVgwMWlhWFRBeWlibXFzdGljcG1JTklSZlZpYjB5cXNZMHpZeHFNUzBEbGZ3QWx0ckJ3NEF3LzY0MA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL3N6X21tYml6X3BuZy9LU3lZZVBESjVIdDhCT3ppY1dpYmY4M2liOGpDZzhSN1ZueUV1S1VIakk5ZUpMWnRPc0Q5WmdPdUhIMmlha0paZkszZHo5OFRmRlZYbkpLU0dCUTdvbVFuUGcvNjQw?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL3N6X21tYml6X3BuZy9LU3lZZVBESjVIdDhCT3ppY1dpYmY4M2liOGpDZzhSN1ZueVJOWVY1eXNydXpLZnRwNEpycjNpY0hhdFFpYmJzRTFYTzBVV2xoa2UxcENraWMxYTIwV1d3MXpQQS82NDA?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL3N6X21tYml6X3BuZy9LU3lZZVBESjVIdDhCT3ppY1dpYmY4M2liOGpDZzhSN1ZueWozNjkzdjhmOWRoaWJLS0NWM0hmejlyQzBDUVdRc2NsMGpqVzhQc3ZSRXBIQmpzR3R1ekhhaHcvNjQw?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL3N6X21tYml6X3BuZy9LU3lZZVBESjVIdDhCT3ppY1dpYmY4M2liOGpDZzhSN1ZueTR2WWNaakZDNGU0M0JmWDBiQXBWNXpwUFhTT2lhWTNPYktPazdRWkFRc0VnMmljbHA1OEtxZ0VRLzY0MA?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL3N6X21tYml6X3BuZy9LU3lZZVBESjVIdDhCT3ppY1dpYmY4M2liOGpDZzhSN1ZueXNuOUd4eFV2TnNpY1pSUzBOSWRiM2t3dno2UlpBbHlGUklMMjZ6NktGNG5ISkFwOWU5NUFkc1EvNjQw?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL3N6X21tYml6X3BuZy9LU3lZZVBESjVIdDhCT3ppY1dpYmY4M2liOGpDZzhSN1ZueXpPSmlhUEJkTkJxT0JhZFRXeExOTFBJbVBLNVg1dk9CTW92Tk9BbGxpYXBydTlnaEpZaGFOT2lhdy82NDA?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL3N6X21tYml6X3BuZy9LU3lZZVBESjVIdDhCT3ppY1dpYmY4M2liOGpDZzhSN1ZueUYydDhEQXJab3E4VzNqYXJ0Z0hrc0JuRkxBamFMWG9Vd1VrM01pY0k4Z25mbnZmc0Z4aWNFdUlRLzY0MA?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL3N6X21tYml6X3BuZy9LU3lZZVBESjVIdDhCT3ppY1dpYmY4M2liOGpDZzhSN1ZueVNDYzIxZUJtUU9EOU40aWE2Z1pHdzlnS21ZTTJpYjVpY2JkNXpaVFJxalo2SmplRGRwTmhzOVZIQS82NDA?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL3N6X21tYml6X3BuZy9LU3lZZVBESjVIdDhCT3ppY1dpYmY4M2liOGpDZzhSN1ZueUllVWRXVnVzSlRYUTRNbWxlM1J0MmZVM0lrY0FrSm1waWNUWGliUXh2Ymg0YTJBaWF4aFNtTkNWUS82NDA?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL3N6X21tYml6X3BuZy9LU3lZZVBESjVIdDhCT3ppY1dpYmY4M2liOGpDZzhSN1ZueXViOE5HR0M1VnU3ZEY4ZVdYYThXdjY3S0dXQmRtZDVQaWNlcG9mZkw2TnVha0g0NG52TktVaWNRLzY0MA?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL3N6X21tYml6X3BuZy9LU3lZZVBESjVIdDhCT3ppY1dpYmY4M2liOGpDZzhSN1ZueTJYQ1U4TWFMZ0FEVk54UlBmZFp1VU9IWmp6THkwcEdZaWFhZWR6UEVlZDdOYUxVUkoyV252TWcvNjQw?x-oss-process=image/format,png
[format_png 13]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL3N6X21tYml6X3BuZy9LU3lZZVBESjVIdDhCT3ppY1dpYmY4M2liOGpDZzhSN1ZueVdsRVpSdkR4MFFZVXhjVGFxdEx3RHJsUVl3QU9kU2RUR3lsQ1k1TE9uY1R4N3dPWFhPU3I0Zy82NDA?x-oss-process=image/format,png
[format_png 14]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL3N6X21tYml6X3BuZy9LU3lZZVBESjVIdDhCT3ppY1dpYmY4M2liOGpDZzhSN1ZueWpaeWtpYmljRldrbmxmVTJRcmlidkMzUHFFR2tqdEY4TjZvYmxpYXdpY1pBcFVtWjRsMWhhTldpYjRHQS82NDA?x-oss-process=image/format,png
[format_png 15]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL3N6X21tYml6X3BuZy9LU3lZZVBESjVIdDhCT3ppY1dpYmY4M2liOGpDZzhSN1ZueWljQ1g4UkhTTmlhREM2SG9wSXRaTXgwQ1ZnbWFiQVU3UFVwUENtcWp1SHM5UnN2UkpTY1c1ZmdRLzY0MA?x-oss-process=image/format,png
[format_png 16]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL3N6X21tYml6X3BuZy9LU3lZZVBESjVIdDhCT3ppY1dpYmY4M2liOGpDZzhSN1ZueVhVWHFEMGM1V0xoTHhnWGZzTVdOQ1ZEWGJjaktLZWxOVTdOeDh2V250bldIN2hEOGhOVTk2QS82NDA?x-oss-process=image/format,png
[format_png 17]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL3N6X21tYml6X3BuZy9LU3lZZVBESjVIdDhCT3ppY1dpYmY4M2liOGpDZzhSN1ZueUZSZ1phUGlhaWF4cXdzRDZVNGJyRGlhM3U2NUtxZHpDUzEyNmF4SXA5bzByZkR4VjFPZ0pmNVVwZy82NDA?x-oss-process=image/format,png
[format_png 18]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL3N6X21tYml6X3BuZy9LU3lZZVBESjVIdDhCT3ppY1dpYmY4M2liOGpDZzhSN1ZueUozM0lWaWN1ZUZUZnh5ZDdmOUdtNElvSFBiamFwSVdsemdWTWYyVjNLa2xSMklYVXRWbXFFZ0EvNjQw?x-oss-process=image/format,png
[format_png 19]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy83UVJUdmtLMnFDNHZuendhSmRIYzROYzF4b1p2dEt3VzRPZ0xvV2lhSEZkaWNtdG9kRXRSTGJ1MkVETEFHYWljNUp3SkNycHpBSUVUQ1AzaWE4NHQ0OG5qU2cvNjQw?x-oss-process=image/format,png
[React]: http://mp.weixin.qq.com/s?__biz=MzU3MTg0MDUyNA==&mid=2247483719&idx=1&sn=d66b298f4bd5a4822fb16cae34d03496&chksm=fcdb4024cbacc9328df1cc79cd5e07796149d6f741144386aab41ad9a5c312cf39137b01c9f0&scene=21#wechat_redirect
[React_Class_Hooks]: http://mp.weixin.qq.com/s?__biz=MzU3MTg0MDUyNA==&mid=2247483709&idx=1&sn=1f7bcfb90e77f9cef70ba9761d6a0f78&chksm=fcdb405ecbacc94806c9553feffc23053caa58ec53cecbb1898397a8a3b871db9adf38555ef0&scene=21#wechat_redirect
[react]: http://mp.weixin.qq.com/s?__biz=MzU3MTg0MDUyNA==&mid=2247483794&idx=2&sn=9ff5274557a5e8244cdfa4f88b076b8c&chksm=fcdb40f1cbacc9e717c5a68fb95f47f6a33639fc6209a4dbc766c9e9aed9e478ce0523b59ad4&scene=21#wechat_redirect
[2020_Vue.js]: http://mp.weixin.qq.com/s?__biz=MzU3MTg0MDUyNA==&mid=2247483701&idx=1&sn=d8e2e8a869ca6af5161f364940b14a6d&chksm=fcdb4056cbacc94033f91a98f177da1adc9d47cb428867162589c39e5ba11541501a770ee40d&scene=21#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzU3MTg0MDUyNA==&mid=2247483788&idx=2&sn=44be1851a34419c18920bd5d21e10050&chksm=fcdb40efcbacc9f9c549884137b4ee8b4338ad6b61c7999f99a75e7d2ba667f78d03bd4cbeb0&scene=21#wechat_redirect
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzU3MTg0MDUyNA==&mid=2247483794&idx=1&sn=31011f9d57ddfacf0daaf65b555a02a5&chksm=fcdb40f1cbacc9e75294a0d95627ddc1d40501366d26e5d5de5d895d57bf926bf05d1eb54382&scene=21#wechat_redirect
[format_png 20]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy83UVJUdmtLMnFDNDJRTmV1TE9PRUU2YkNHNTk1QWFoaWNJUGZOUDdzdGdiM01Ca1RpYzZld3JoYzc2UWljaWFNZ1RGRHU0d3Bub1l5cGN2OFdHV3pBWkQxTVEvNjQw?x-oss-process=image/format,png
[format_png 21]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL3N6X21tYml6X2pwZy9LU3lZZVBESjVIdXljVFN3S0swRGt6TWY0bUVYdmtDU0JodkZqT291WlB2UWZpY0pKYTNiQ3BWcVgwcmtuR0lqMFFLMFJYWVJlelNZaGljM1dhNlJ6OG93LzY0MA?x-oss-process=image/format,png
[format_png 22]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy83UVJUdmtLMnFDNXJsamVCdzhPSGxSajNGeEU2N3RYOE9FQUVzTU43VWNMTngwemMzZnJVeDA0U2liYjNsbU11d3RZS0UwUGliQzJLdHFRbnp2dkhIaWFNUS82NDA?x-oss-process=image/format,png