我们选择Charles来作为抓包工具，本文将从0到1讲解从电脑端抓包到手机端抓包。

Charles是一款被广泛使用的网络抓包工具，它可以用来监控和调试通过HTTP和HTTPS协议发送和接收的所有网络请求和响应。Charles通常用于网页和网络应用的开发过程中，帮助开发人员理解他们的应用是如何与互联网通信的，以及调试网络相关的问题。

以下是Charles的一些核心特点和功能：

安装

从官网下载对应系统的 Charles 最新版本，双击下载的安装包，一路默认安装，安装完成会在桌面生成类似花瓶的图标。

接下来就进入到Charles中，然后做一些最基本的配置。

在自己电脑上抓包很简单，在proxy中打开macOs代理就可以抓到本机上所有的包了。

然后在电脑上访问一下掘金的首页，就会抓到所有的接口：

这里我已经提前在电脑上装了Charles的证书，否则https的接口是抓不了的，我们来配置一下电脑上的证书：

然后会自动打开Mac上的钥匙串访问，我们将这个证书设置为始终信任，否则走代理是拉不到https的数据的。

到这里电脑端的抓包就OK了。

但是我们的应用场景大部分是在手机端上，因为电脑上可以直接在控制台去看日志，而在App、小程序如果没有后台监控是无法抓到接口的信息的，接下来我们配置一下。

要想手机上抓包，我们先把macoc proxy选项勾掉，这样电脑上就不会进入到Charles的抓包记录中了。

然后在SSL Proxying Settings中配置手机上想要抓包的访问域名和端口，这里域名直接设置*，端口设置443，抓https的包。

然后在Proxying Settings中配置电脑端代理的地址和端口，用于手机连接。

接下来打开手机，我的是IOS，连接到和电脑端同一个wifi，然后开启代理，代理的服务器地址和端口就是上面配置的地址和端口，就像这样：

至此电脑和手机已经关联上了，访问的是同一个局域网，Charles上也可以抓到手机访问的接口了，但是没有数据，这是因为手机上也需要配置Charles安全证书。

点击以后手机上会有安装的提示，IOS比较特殊，高版本的情况在安装以后还需要在设置中信任一下证书才可以生效。

至此所有配置就都搞定了，你可以试试手机访问网页，看看Charles，如果有异常的话，可以尝试重启手机和Charles，在手机端打开掘金App，抓到的包如下：

到这里就都搞定了，我们进入淘宝里看看：

到这一步，你想抓端上哪个应用的数据就都可以搞定了，如果上面的配置走完还是不行，尝试一下以下排查方案。

证书问题：
- 证书未被客户端信任：确保服务器使用的证书是由一个客户端信任的证书颁发机构（CA）签发的。
- 证书已过期：检查证书的有效日期，确保它是当前有效的。
- 错误的证书名称：证书上的名称需要和服务器的域名一致，否则客户端将无法验证服务器的身份。
中间证书缺失：
- 服务器需要发送完整的证书链，包括所有的中间证书。如果有缺失，客户端可能无法建立信任链。
客户端不支持服务器的加密算法：
- 确保服务器的加密设置和客户端支持的算法兼容。在某些情况下，旧的或不安全的加密方法可能已被客户端禁用。
配置错误：
- 服务器的SSL/TLS配置可能存在错误，需要仔细检查SSL/TLS服务器配置。
SNI 问题（Server Name Indication）：
- 如果服务器上托管了多个域，并且使用了基于SNI的扩展，确保客户端请求中包含了正确的服务器名称。
客户端问题：
- 客户端操作系统或应用程序可能受到了限制或配置不正确，无法处理当前的SSL/TLS连接请求。

如果喜欢我的文章或者想上岸大厂，可以关注公众号「量子前端」，将不定期关注推送前端好文、分享就业资料秘籍，也希望有机会一对一帮助你实现梦想。

手机抓包也太好玩了吧！