Charles Map Local 与 Map Remote 实战：接口 Mock 与本地联调
在前后端联调时，常常会遇到这样的困境：后端接口还没写完，前端却要先把页面做出来；或者线上出了个诡异的 bug，你想临时把某个接口的返回改一改来复现。Map Local 和 Map Remote 就是 Charles 里最能解决这类问题的两把利器——它们不需要改一行代码、不需要改 hosts、也不需要后端配合，就能把请求"偷梁换柱"。
前置条件：已完成 Charles 的基础代理与 HTTPS 解密配置（能在会话列表里看到明文的请求/响应）。如果 HTTPS 还显示 <unknown>，请先参考 SSL 证书配置一文。
- 一、Map Local：用本地文件替换接口返回
- 二、Map Local 的三个坑（Content-Type / CORS / 缓存）
- 三、Map Remote：把线上域名指向测试/本地服务
- 四、Map Local vs Map Remote 怎么选
- 五、实战：3 分钟 Mock 一个还没上线的接口
一、Map Local：用本地文件替换接口返回
Map Local 的作用是：当某个请求命中你设定的规则时，Charles 不再把它发给真实服务器，而是直接返回你电脑上的一个本地文件。接口返回什么，完全由你说了算。
操作步骤：
1. 菜单栏打开 Tools > Map Local，勾选顶部的 Enable Map Local。
2. 点击 Add，在 Map From 区域填写要拦截的请求特征：
| 字段 | 说明 | 示例 |
|---|---|---|
| Protocol | 协议，可留空匹配全部 | https |
| Host | 域名，支持 * 通配 | api.example.com |
| Port | 端口，留空匹配全部 | 443 |
| Path | 路径，支持通配符 | /v1/user/profile |
| Query | 查询参数，可留空 | id=1001 |
3. 在 Local path 选择本地文件（一般是一个 .json）。点击 OK。
4. 重新触发请求，你会发现返回内容已经变成本地文件的内容，且会话上会标注来自 Map Local。
技巧：想连响应头一起自定义？把本地文件保存为 .json 之外，Charles 还支持把整段 HTTP 响应（含 header）保存成文件来映射——在会话上右键 Save Response 保存原始响应，改完再用 Map Local 指向它。
二、Map Local 的三个坑
1. Content-Type 不对导致前端解析失败。Map Local 会按文件扩展名猜测 Content-Type。如果接口本该返回 application/json，但你的文件叫 data.txt，前端可能拿到 text/plain 而报错。解决办法：文件用 .json 后缀，或用下面的 Rewrite 规则强制改 header。
2. 跨域（CORS）请求丢了响应头。Map Local 返回的本地文件不带原接口的 Access-Control-Allow-Origin 等跨域头，浏览器会拦截。此时配合 Tools > Rewrite 补一条加 header 的规则：
| Type | Where | Name | Value |
|---|---|---|---|
| Add Header | Response | Access-Control-Allow-Origin | * |
3. 浏览器/客户端缓存干扰。如果请求被本地磁盘缓存或 Service Worker 拦截，根本没走到 Charles。调试时先在浏览器 DevTools 里勾选 Disable cache，或给 URL 加个随机 query 参数。
三、Map Remote：把线上域名指向测试/本地服务
Map Remote 不改内容，而是改目的地：把发往 A 地址的请求，透明地转发到 B 地址。经典用途：
- App 只认线上域名，但你想让它连你本机的开发服务器（
localhost:3000）； - 把生产域名临时指向灰度/预发环境，验证新版本；
- 前端
https://www.prod.com页面调https://api.prod.com，你想让 api 走本地 mock server，同时不触发跨域。
操作步骤：Tools > Map Remote > Enable Map Remote > Add，左边 Map From 填原始地址，右边 Map To 填目标地址：
| Host | Port | Path | |
|---|---|---|---|
| Map From | api.example.com | 443 | / |
| Map To | 127.0.0.1 | 3000 | / |
注意：Map To 若是本机 http 服务，记得把 Map To 的 Protocol 设为 http、Port 设为本地端口，否则会因为目标不支持 TLS 而握手失败。留空的字段表示"保持原样"。
和改 hosts 的区别：改 hosts 只能换 IP、不能换端口/路径/协议，且对所有程序全局生效；Map Remote 可以精确到路径、能改端口和协议，而且只在 Charles 代理链路上生效，随开随关，不污染系统。
四、Map Local vs Map Remote 怎么选
| 维度 | Map Local | Map Remote |
|---|---|---|
| 本质 | 用本地文件替换返回 | 把请求转发到另一个服务器 |
| 适合 | Mock 静态返回、造异常数据、复现线上 bug | 联调本地/测试服务、灰度验证 |
| 数据是否动态 | 否，固定文件内容 | 是，由目标服务实时返回 |
| 需要后端服务吗 | 不需要 | 需要一个可访问的目标服务 |
| 响应头 | 需自行用 Rewrite 补 | 由目标服务返回，天然完整 |
一句话：要"假数据"用 Map Local，要"换服务器"用 Map Remote。
五、实战：3 分钟 Mock 一个还没上线的接口
假设前端要对接 GET https://api.example.com/v1/order/list，但后端还没写好。步骤：
1. 在本地新建 order_list.json：
{
"code": 0,
"message": "ok",
"data": {
"total": 2,
"list": [
{ "id": 1001, "title": "订单A", "status": "paid", "amount": 99.00 },
{ "id": 1002, "title": "订单B", "status": "pending", "amount": 12.50 }
]
}
}2. Tools > Map Local > Add，Host 填 api.example.com，Path 填 /v1/order/list，Local path 指向 order_list.json。
3. 若前端是浏览器跨域调用，再加一条 Rewrite 规则给响应补 Access-Control-Allow-Origin: *。
4. 刷新页面——前端拿到了真实结构的数据，可以先把列表、分页、状态标签都写完，等后端接口就绪后删掉这条 Map Local 即可无缝切换真实接口。
进阶：想让 Mock 数据"活起来"（分页、随机、带业务逻辑）？用 Map Remote 把接口指向本地一个几十行的 Node/Express mock server，比维护一堆静态 json 文件更灵活。
掌握这两个功能后，前端不再被后端进度卡住，测试可以随意构造边界数据，排查线上问题也能就地复现。它们是 Charles 从"看包工具"进化成"调试工具"的关键一步。