你是否遇到过这些场景：线上接口返回异常但 DevTools 看不到？想把线上请求映射到本地调试？手机 App 的网络请求怎么抓？

如果你和我一样，对"代理"、"抓包"、"SSL 证书"这些概念一知半解，这篇文章帮你彻底搞懂。

Charles 是什么？

一句话：Charles 是一个 HTTP/HTTPS 代理服务器，能拦截并展示你电脑/手机上所有的网络请求和响应。

你可以把它理解成"网络请求的监控摄像头" — 所有进出你设备的流量都经过它，它全部记录下来给你看，还能让你中途修改。

---

工作原理 — 看完就懂

HTTP 请求：天然透明

HTTP 是明文传输的，Charles 作为中间人，直接就能看到所有内容：

浏览器 ── 请求 ──▶ Charles（看到并记录）── 请求 ──▶ 服务器
浏览器 ◀── 响应 ── Charles（看到并记录）◀── 响应 ── 服务器

不需要任何额外配置，打开 Charles 就能看到所有 HTTP 请求的完整信息。

HTTPS 请求：加密隧道

HTTPS = HTTP + TLS 加密。浏览器和服务器之间建立了加密隧道，Charles 虽然转发了数据，但只能看到"谁连了谁"，看不到具体内容。

这就是你在 Charles 里看到某些请求只显示 CONNECT 和一个 🔒 锁图标的原因 — Charles 知道你访问了 https://example.com，但不知道你请求了什么、服务器返回了什么。

SSL Proxying：Charles 的"双面间谍"模式

为了看到 HTTPS 的内容，Charles 需要开启 SSL Proxying，这时它会变成双面间谍：

                    ┌─────────────────────────┐
浏览器 ──TLS加密──▶ │  Charles（持有假证书）     │ ──TLS加密──▶ 真实服务器
                    │  ① 用假证书冒充服务器      │
                    │  ② 解密浏览器发来的请求     │
                    │  ③ 用真证书访问真实服务器    │
                    │  ④ 解密服务器返回的响应     │
                    │  ⑤ 再用假证书加密返回浏览器  │
                    └─────────────────────────┘

整个过程：

1. 浏览器发起 HTTPS 请求到 https://api.example.com
2. Charles 拦截，伪造一张 api.example.com 的证书返回给浏览器
3. 浏览器以为在和真正的服务器通信，把请求用"假证书"加密发给 Charles
4. Charles 解密请求，看到明文内容并记录
5. Charles 再用真正的证书和 api.example.com 建立连接，把请求转发过去
6. 拿到真实响应后，Charles 解密、记录，再用假证书加密返回给浏览器

浏览器全程被蒙在鼓里。

为什么需要安装 Charles 根证书？

浏览器不是傻子。正常情况下，收到一张"假证书"会立刻报错：NET::ERR_CERT_AUTHORITY_INVALID。

安装 Charles 根证书的意思是：告诉系统"我信任 Charles 签发的所有证书"。这样浏览器收到 Charles 伪造的证书时就不会报警了。

*:443 通配符为什么会搞坏某些网站？

在 SSL Proxying Settings 里配了 *:443 后，Charles 会对所有 HTTPS 流量执行中间人解密。大部分情况下没问题，但有几种例外：

情况	原因
证书钉扎（Certificate Pinning）	某些 App/网站会硬编码真实证书的指纹，发现不是原证书就拒绝连接
HSTS Preload	浏览器内置了某些域名的证书规则，不接受非官方 CA 签发的证书
双向认证（mTLS）	服务器要求客户端也出示证书，Charles 无法提供
系统级请求	macOS 推送通知、iCloud 同步等系统服务被代理后可能异常

---

SSL Proxying 的正确配置姿势

❌ 错误做法：只配特定域名

Include: my-api.com:443

问题：其他所有 HTTPS 请求都只能看到 CONNECT 隧道，看不到内容。抓包功能大打折扣。

❌ 错误做法：*:443 通配符 + 不管 Exclude

Include: *:443
Exclude: （空）

问题：所有 HTTPS 流量都被解密，可能导致某些网站/App 访问异常。

✅ 推荐做法：*:443 通配符 + Exclude 排除问题域名

Include: *:443
Exclude: problematic-site.com:443
         some-pinned-app.com:443

默认能看到所有 HTTPS 内容，遇到哪个网站因 Charles 挂掉了，就加到 Exclude 里。这是最省心的方案。

---

前端最常用的 6 个功能

1. 抓包查看请求详情

最基础的功能。打开 Charles → 访问页面 → 左侧 Structure 列表找到目标域名 → 点击具体请求。

• Request 标签：请求头、请求参数、请求体
• Response 标签：响应头、响应体（JSON / HTML / 图片）
• Overview 标签：URL、状态码、耗时、请求大小

实际场景：后端说"接口没问题"，你觉得前端也没问题。Charles 一抓包，发现请求参数少传了一个字段 — 破案。

2. Map Remote（远程映射）⭐

把线上/测试环境的请求映射到本地开发服务器，这是前端最高频使用的功能。

线上请求：https://cdn.example.com/app/index.js
映射到：  http://127.0.0.1:3000/index.js

配置方式：Tools → Map Remote → Add

字段	From（线上）	To（本地）
Protocol	https	http
Host	cdn.example.com	127.0.0.1
Port	443	3000
Path	/app/*	/*

使用场景：

• 在线上/测试环境调试本地代码
• 不用发布就能在真实环境验证修改
• 搭建平台组件本地预览

⚠️ 如果 From 是 HTTPS，必须在 SSL Proxying 的 Include 中添加该域名！否则 Map Remote 不生效。

3. Map Local（本地文件映射，我愿称之为：本地开发的神！！！）

用本地文件替换接口返回，非常适合 Mock 数据。

请求 https://api.example.com/user/info
→ 返回本地文件 ~/mock/user-info.json

配置方式：Tools → Map Local → Add

使用场景：

• 后端接口还没开发好，前端先用 Mock 数据开发
• 复现某个特定的接口返回场景（如错误码、空数据）
• 不用改前端代码就能切换不同的数据

4. Rewrite（重写请求/响应）

修改请求或响应的 Header、Body、URL 等。

配置方式：Tools → Rewrite → Add

场景	做法
解决跨域	修改 Response Header，添加 Access-Control-Allow-Origin: *
修改 Cookie	修改 Request Header 的 Cookie 字段
模拟接口超时	修改 Response Status 为 504
注入调试参数	修改 Request URL 的 Query 参数

5. Breakpoints（断点）

拦截请求或响应，手动编辑后再放行。类似 Debugger，但是针对网络请求。

使用方式：右键请求 → Breakpoints → 再次发送该请求时会被拦截

使用场景：

• 手动修改请求参数后再发送
• 修改接口返回数据后再给到前端
• 模拟各种异常场景

6. Throttle（限速）

模拟弱网环境，测试页面在慢网下的表现。

配置方式：Proxy → Throttle Settings → 勾选 Enable Throttling → 选择预设或自定义

预设	下载速度	延迟
3G	780 Kbps	200ms
4G	6 Mbps	50ms
WiFi	30 Mbps	2ms

---

完整安装与配置教程

第一步：安装 Charles

前往 Charles 官网 下载安装。

第二步：安装根证书（关键！）

macOS

1. 菜单 Help → SSL Proxying → Install Charles Root Certificate
2. 钥匙串访问自动打开，找到 Charles Proxy CA 证书
3. 双击证书 → 信任 → 选择 「始终信任」
4. 关闭窗口，输入密码确认

Windows

1. 菜单 Help → SSL Proxying → Install Charles Root Certificate
2. 按提示安装到「受信任的根证书颁发机构」

第三步：配置 SSL Proxying

1. 菜单 Proxy → SSL Proxying Settings
2. 勾选 Enable SSL Proxying
3. Include 列表点 Add，Host 填 *，Port 填 443
4. 后续遇到问题域名加到 Exclude 列表

第四步（可选）：手机抓包

iOS

1. 手机和电脑连同一个 Wi-Fi
2. 手机 设置 → Wi-Fi → 当前网络 → HTTP 代理 → 手动
   • 服务器：电脑 IP（Charles 菜单 Help → Local IP Address 查看）
   • 端口：8888
3. 手机 Safari 打开 chls.pro/ssl 下载并安装描述文件
4. 设置 → 通用 → 关于本机 → 证书信任设置 → 打开 Charles 证书信任开关

Android

基本步骤与 iOS 相同，但 Android 7.0+ 默认不信任用户安装的 CA 证书。解决方案：

• 如果是自己的 App：在 AndroidManifest.xml 中配置 networkSecurityConfig 信任用户证书
• 如果是第三方 App：需要 Root 设备将证书安装到系统目录

---

常见问题 FAQ

Q: 为什么某些请求只显示 CONNECT 看不到内容？

这些是 HTTPS 请求，且该域名未被 SSL Proxying 解密。确认 SSL Proxying 的 Include 列表中包含该域名（或通配符 *:443）。

Q: 开了 Charles 后某些网站打不开？

该网站的证书被 Charles 代理后出了问题。两种解决方式：

1. 把该域名加到 SSL Proxying 的 Exclude 列表
2. 暂时关闭 SSL Proxying（菜单 Proxy → 取消勾选 SSL Proxying）

Q: Map Remote 配了但不生效？

排查清单：

1. ☑️ Map Remote 是否启用（Enable Map Remote 要勾选）
2. ☑️ From 的协议、Host、Path 是否完全匹配实际请求
3. ☑️ 如果 From 是 HTTPS，SSL Proxying 是否包含了该域名
4. ☑️ 本地服务是否启动且端口正确
5. ☑️ Charles 是否在录制状态（顶部红色录制按钮应为激活态）

Q: 关了 Charles 后上不了网？

Charles 修改了系统代理设置但没正常还原。手动关闭：

• macOS：系统设置 → 网络 → Wi-Fi → 详细信息 → 代理 → 关闭所有代理
• Windows：设置 → 网络和 Internet → 代理 → 关闭手动代理

Q: 如何只看某个域名的请求？

三种方式：

1. 左下角 Filter 输入框输入域名关键词
2. 右键域名 → Focus — 只高亮显示该域名
3. 菜单 Proxy → Recording Settings → Include 只录制特定域名

---

快捷键速查表

操作	macOS	Windows
开始/停止录制	⌘ R	Ctrl + R
清空会话	⌘ K	Ctrl + K
重放选中请求	⌘ R	Ctrl + R
搜索请求	⌘ F	Ctrl + F

---

总结

概念	一句话理解
Charles	网络请求的监控摄像头 + 编辑器
代理	浏览器把请求托管给 Charles，Charles 帮忙转发
SSL Proxying	Charles 伪造证书做中间人，解密 HTTPS 流量
根证书	让系统信任 Charles 的"假证书"，否则浏览器会报错
Map Remote	把线上请求指向本地服务器
Map Local	用本地文件替换接口返回
Rewrite	修改请求/响应的 Header、Body
Breakpoints	拦截请求/响应，手动编辑后放行

SSL Proxying 推荐配置：Include 保留 *:443，遇到问题域名加到 Exclude。

掌握以上内容，日常前端开发中 90% 的抓包和代理调试需求都能搞定 🎉

---

如果这篇文章对你有帮助，欢迎点赞收藏 ❤️