Charles：网络请求的拦截和修改 – wiki基地

Charles：网络请求的拦截和修改

Charles 是一款功能强大的 HTTP 代理服务器、HTTP 监视器和反向代理服务器。它允许开发者查看所有连接到互联网的 HTTP 通信，包括请求、响应和 HTTP 头信息（包含 cookie 和缓存信息）。这使得 Charles 成为 Web 开发和测试中不可或缺的工具，尤其是在移动开发领域。本文将深入探讨 Charles 的核心功能：网络请求的拦截和修改，并提供详细的操作指南和实际案例。

一、Charles 的工作原理

Charles 作为中间代理，拦截客户端和服务器之间的所有 HTTP/HTTPS 通信。客户端的所有请求都会先发送到 Charles，Charles 再将请求转发给服务器。服务器的响应同样会先经过 Charles，然后再返回给客户端。在这个过程中，Charles 可以记录、修改和重定向请求和响应，从而实现各种调试和测试功能。

二、拦截 HTTP 请求

Charles 可以拦截所有 HTTP 请求，并显示详细的请求信息，包括：

• 请求 URL: 请求的完整地址。
• 请求方法: GET、POST、PUT、DELETE 等。
• 请求头: 包含 User-Agent、Cookie、Referer 等信息。
• 请求参数: GET 请求的参数在 URL 中，POST 请求的参数在请求体中。
• 响应状态码: 200、404、500 等。
• 响应头: 包含 Content-Type、Server 等信息。
• 响应体: 服务器返回的数据。

如何使用 Charles 拦截 HTTP 请求:

1. 安装 Charles 并配置代理: 下载并安装 Charles，然后在浏览器或移动设备上配置代理，指向 Charles 运行的机器的 IP 地址和端口号 (默认 8888)。
2. 启用 SSL 代理: 如果需要拦截 HTTPS 请求，需要在 Charles 中安装根证书，并在浏览器或移动设备上信任该证书。
3. 启动抓包: 点击 Charles 工具栏上的 “Start Recording” 按钮，开始抓取网络请求。

三、修改 HTTP 请求

Charles 提供多种方式修改 HTTP 请求：

• 修改请求参数: 在 Charles 的 “Structure” 视图中，可以直接修改请求参数的值。
• 修改请求头: 同样在 “Structure” 视图中，可以修改或添加请求头信息。
• 修改请求方法: 可以将 GET 请求改为 POST 请求，或其他请求方法。
• 修改请求 URL: 可以修改请求的目标 URL。
• Compose 功能: Charles 的 Compose 功能允许用户创建一个全新的请求，可以自定义请求的各个方面。

使用案例：修改请求参数测试接口:

假设一个接口的 URL 为 /api/users?page=1&limit=10，可以使用 Charles 修改 page 和 limit 参数，测试接口在不同分页情况下的返回结果。

四、拦截和修改 HTTPS 请求

拦截 HTTPS 请求需要额外的配置，因为 HTTPS 通信是加密的。

步骤:

1. 安装 Charles 根证书: 在 Charles 的 “Help” 菜单中选择 “SSL Proxying” -> “Install Charles Root Certificate”。
2. 信任 Charles 根证书: 根据不同的操作系统和浏览器，需要在系统或浏览器中信任 Charles 安装的根证书。
3. 启用 SSL 代理: 在 Charles 的 “Proxy” 菜单中选择 “SSL Proxying Settings”，添加需要拦截 HTTPS 请求的域名或 IP 地址和端口号。

五、断点功能 (Breakpoints)

Charles 的断点功能允许在请求发送到服务器之前或服务器响应返回客户端之前暂停请求，并修改请求或响应的内容。

设置断点:

1. 在 Charles 中选中需要设置断点的请求。
2. 右键点击该请求，选择 “Breakpoints”。
3. 再次发送该请求时，Charles 会在请求或响应阶段暂停。

修改请求/响应:

在断点暂停后，可以修改请求或响应的内容，然后点击 “Execute” 继续请求流程。

六、Map Local 功能

Map Local 功能允许将指定的网络请求映射到本地文件。这在前端开发中非常有用，可以方便地使用本地文件进行调试，而无需修改服务器代码。

配置 Map Local:

1. 在 Charles 的 “Tools” 菜单中选择 “Map Local”。
2. 点击 “Add” 添加新的映射规则。
3. 配置 “Protocol”、”Host”、”Port”、”Path” 等信息，将网络请求映射到本地文件。

七、Rewrite 功能

Rewrite 功能允许修改请求和响应的内容，例如修改 URL、请求头、响应头和响应体。Rewrite 功能比 Map Local 功能更灵活，可以根据正则表达式进行匹配和替换。

配置 Rewrite:

1. 在 Charles 的 “Tools” 菜单中选择 “Rewrite”。
2. 点击 “Add” 添加新的 Rewrite 规则。
3. 配置 “Location”、”Type”、”Match”、”Replace” 等信息。

八、Map Remote 功能

Map Remote 功能允许将指定的网络请求重定向到另一个服务器。这在测试不同环境下的接口时非常有用。

配置 Map Remote:

1. 在 Charles 的 “Tools” 菜单中选择 “Map Remote”。
2. 点击 “Add” 添加新的映射规则。
3. 配置 “Protocol”、”Host”、”Port”、”Path” 等信息，将网络请求重定向到目标服务器。

九、 Throttling 功能

Throttling 功能可以模拟不同的网络环境，例如低带宽、高延迟等，用于测试应用程序在不同网络环境下的性能。

配置 Throttling:

1. 在 Charles 的 “Proxy” 菜单中选择 “Throttle Settings”。
2. 选择 “Enable Throttling”。
3. 配置 “Throttle preset” 或自定义带宽、延迟、可靠性等参数。

十、 总结

Charles 是一款功能强大的网络调试工具，其拦截和修改网络请求的功能对于 Web 开发和测试至关重要。本文详细介绍了 Charles 的主要功能和使用方法，并提供了丰富的案例，希望能帮助读者更好地理解和使用 Charles。熟练掌握 Charles 的各种功能，可以大大提高开发效率，并帮助开发者更好地定位和解决问题. 希望读者能够通过本文的学习，将 Charles 应用到实际工作中，提升自己的开发技能。