1. 这不是“造数据”而是前端联调的呼吸系统你有没有遇到过这样的场景后端接口还没交付UI设计稿已经堆满钉钉消息产品经理在群里所有人问“页面什么时候能跑起来”或者更糟——接口返回格式突然变了字段名从user_name改成userName前端所有页面集体报错而你翻遍文档也找不到最新契约又或者测试环境里某个支付回调总是500但日志里只有一行“内部错误”连具体哪一行抛异常都看不到。这时候Mock 不是锦上添花的玩具它是你每天能正常呼吸的氧气。我做前端开发和联调支持十年带过二十多个中大型项目从金融风控系统到电商秒杀平台最深的体会是真正的联调瓶颈从来不在代码写得对不对而在于“数据流是否可控、可追溯、可复现”。Mock 接口数据实操表面看是伪造返回值背后是一整套数据治理逻辑——规则改写解决的是“数据契约不一致”的问题断点拦截解决的是“请求路径不可见、不可干预”的问题而联调本身是把这两者拧成一股绳让前后端在同一个数据语境里对话。标题里的“规则改写”和“断点拦截”不是两个并列功能而是分属不同层级的控制能力规则改写作用于响应体Response Body它决定“我给你什么数据”断点拦截作用于请求链路Request Flow它决定“我让你发给谁、什么时候发、发完之后我怎么插手”。两者叠加才构成完整的“中间人”能力——你既不是纯客户端也不是纯服务端而是站在流量必经之路上的那个调度员。这个实操方案适合三类人一是刚接手老项目的前端面对一堆“祖传接口”不知从何下手二是需要快速验证 UI 交互逻辑的产品/设计师不想等后端排期三是测试工程师需要构造边界值、异常状态来压测业务流程。它不依赖后端配合不修改任何生产代码所有操作都在本地或测试环境完成但效果直逼真实联调。接下来我会用一个真实金融类项目模拟股票行情用户持仓查询贯穿全文把每一步背后的“为什么这么选”“踩过什么坑”“参数怎么算”全盘托出。2. 整体设计思路为什么不用 Axios Mock Adapter 或 Vite Mock Server先说结论Axios Mock Adapter 适合单元测试Vite Mock Server 适合开发阶段静态模拟但都不适合真实联调场景。这不是技术优劣问题而是定位错位。我试过在三个项目里强行用 Axios Mock Adapter 做联调第一个项目前端用 Vue3 TypeScript后端是 Java Spring Boot约定接口前缀/api/v1/。当时觉得 Mock Adapter 简单直接在main.ts里全局注册import axios from axios; import { mockAdapter } from ./mock/adapter; mockAdapter(axios); // 注册拦截器结果联调第一天就崩了——后端同事临时加了个/api/v1/stock/tick?symbol600519的实时行情接口但 Mock Adapter 只能按 URL 字符串匹配而真实请求带了动态 query 参数。我不得不写一堆正则去捕获symbol后面的值再手动拼 JSON 返回。更麻烦的是当后端改了响应结构比如把data字段从对象改成数组Mock 文件要同步改但没人通知我导致页面白屏两小时最后发现是 Mock 数据里少了一个list包裹层。Vite Mock Server 看似更智能它基于文件系统自动映射路由。比如建个mock/stock.tsexport default [ { url: /api/v1/stock/tick, method: get, response: ({ query }) { const symbol query.symbol; return { code: 0, data: { symbol, price: 1823.5, change: -0.23 } }; } } ]但它有个致命缺陷所有 Mock 规则必须提前写死无法在运行时动态修改。联调中期测试发现一个关键 bug当用户持仓为空时后端返回data: null但前端组件没做空值判断直接.map()报错。我想立刻模拟这个null场景但 Vite Mock Server 需要重启服务才能生效而此时后端正在紧急修复线上问题我连npm run dev都不敢敲——怕打断其他同事的调试。所以最终我们选了Charles Proxy 自定义 Map Local Breakpoint 拦截组合方案。理由很实在Charles 是 HTTP/HTTPS 流量代理它工作在 TCP 层之上、应用层之下所有浏览器、App、小程序发出的请求都必须经过它不依赖前端框架、不侵入业务代码、不改变构建流程Map Local 功能允许你把任意远程 URL 映射到本地 JSON 文件实现“规则改写”——比如把https://prod-api.example.com/api/v1/position映射到./mock/position-empty.json返回空数据Breakpoint 拦截则让你在请求发出前、响应返回前各设一个断点像手术刀一样精准切开流量在任意环节注入、修改、阻断数据——这才是“断点拦截”的真意不是简单开关而是实时干预。有人会问为什么不用 Fiddler 或 mitmproxyFiddler 在 macOS 上兼容性差mitmproxy 命令行操作门槛高而 Charles 的 GUI 对前端极其友好断点界面直观到连实习生都能上手。更重要的是它的 SSL Proxying 设置一次后续所有 HTTPS 请求自动解密省去证书安装的无数坑——这点在金融类项目里尤其关键因为所有接口都强制 HTTPS且证书校验严格。3. 核心细节解析规则改写与断点拦截的底层逻辑3.1 规则改写Map Local 不是“替换URL”而是“重定向响应源”很多人把 Charles 的 Map Local 理解成简单的 URL 替换比如“把 A 请求换成 B 请求”。这是误区。Map Local 的本质是HTTP 响应体劫持Response Body Hijacking它监听所有匹配规则的请求当请求到达 Charles 时Charles 并不转发给原始服务器而是直接读取你指定的本地文件把文件内容作为 HTTP 响应返回给客户端。这意味着请求头Headers、状态码Status Code、响应头Response Headers全部由你本地文件控制而不受原始服务器影响。这正是规则改写的威力所在。举个金融项目的真实例子后端有一个获取用户持仓的接口GET /api/v1/position生产环境返回HTTP/1.1 200 OK Content-Type: application/json; charsetutf-8 X-Request-ID: abc123 { code: 0, msg: success, data: [ { symbol: 600519, name: 贵州茅台, shares: 100, avg_cost: 1750.25 }, { symbol: 000001, name: 平安银行, shares: 500, avg_cost: 12.88 } ] }但测试发现当用户没有任何持仓时后端返回data: []而前端期望data: null。这时你不能只改 JSON 内容还要确保状态码是200Content-Type正确否则 Axios 会因 MIME 类型不匹配拒绝解析。正确做法是创建mock/position-empty.json{ code: 0, msg: success, data: null }然后在 Charles 中配置 Map LocalLocation:https://prod-api.example.com/api/v1/positionLocal Path:./mock/position-empty.json✅Enable Map Local✅Also map HTTPS requests必须勾选否则 HTTPS 请求不生效提示Map Local 规则匹配是精确字符串匹配不支持通配符。如果接口带 query 参数如/api/v1/position?userId123你需要把完整 URL 写进去或者用更灵活的Rewrite功能下文详述。3.2 断点拦截Breakpoint 不是“暂停”而是“流量闸门”Breakpoint 拦截常被误解为“让请求卡住”其实它是个双向阀门你可以在请求发出前Request修改请求参数、Header、Body也可以在响应返回前Response修改状态码、Header、Body。这才是“断点拦截”的完整能力。以股票行情接口为例后端提供/api/v1/stock/tick但要求所有请求必须带X-Auth-TokenHeader且 Token 必须是 JWT 格式。开发阶段后端还没提供 Token 生成服务你只能硬编码一个假 Token。但如果直接写死在代码里上线时容易忘记删造成安全风险。解决方案用 Breakpoint 在请求发出前注入 Header。步骤在 Charles 中打开Proxy → Breakpoint Settings点击Add填入Location:https://prod-api.example.com/api/v1/stock/tickType:Request✅Enable Breakpoint访问页面触发该接口请求Charles 会弹出 Breakpoint 窗口在Request Headers标签页点击Add Header输入Key:X-Auth-TokenValue:eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c示例 JWT点击Execute请求继续发送这样所有对该 URL 的请求都会自动带上 Token且只在 Charles 开启时生效代码里完全干净。更进一步你可以用Rewrite功能实现动态 Token 注入——比如从 localStorage 读取authToken但需配合 Charles 的 JavaScript 扩展稍后详解。注意Breakpoint 是逐次生效的每次请求都要手动点 Execute。如果想自动化必须用 Rewrite 或 Map Remote将请求转发到另一个 Mock 服务。但手动模式恰恰是优势——它强迫你“看见”每一次请求培养对数据流的敏感度。3.3 规则改写进阶Rewrite 功能解决动态参数难题Map Local 解决静态数据但真实接口充满动态参数/api/v1/stock/tick?symbol600519marketSH、/api/v1/order/create?order_idORD-20231001-001。为每个参数组合建一个 JSON 文件不现实。Charles 的Rewrite功能就是为此而生。它不是替换整个响应而是像正则引擎一样在响应体中查找、替换特定字符串或 JSON 路径。例如后端返回的股票价格是字符串1823.50但前端需要数字类型。你可以在 Rewrite 中添加规则Location:https://prod-api.example.com/api/v1/stock/tickType:Response BodyMatch Type:JSON PathJSON Path:$.data.priceReplace With:{{value}}→ 改为Number({{value}})但更实用的是动态响应生成。Charles 支持 JavaScript 脚本你可以在 Rewrite 中写 JS 逻辑// Rewrite Script for /api/v1/stock/tick function transform(response) { const body JSON.parse(response.body.toString()); // 根据 query 参数动态修改 price const symbol request.url.searchParams.get(symbol); if (symbol 600519) { body.data.price 1823.5 Math.random() * 10; // 模拟实时波动 } response.body JSON.stringify(body); return response; }这个脚本在每次响应返回前执行request对象包含完整请求信息URL、Headers、Bodyresponse对象可修改响应内容。它比 Map Local 灵活得多且无需重启 Charles。实操心得Rewrite 脚本调试困难Charles 不提供 console.log。我的技巧是先在浏览器控制台写好逻辑再复制进 Charles或者用alert(JSON.stringify(request))临时弹窗查看请求结构仅限开发机勿提交到团队。4. 实操过程从零搭建金融行情联调环境4.1 环境准备Charles 安装与 HTTPS 解密配置Charles 官网下载 macOS/Windows 版本Linux 用户可用charles-proxy包安装后首次启动会提示安装 SSL 证书。这一步必须做且必须信任证书否则所有 HTTPS 请求会失败。具体步骤以 macOS 为例Charles →Help → SSL Proxying → Install Charles Root Certificate系统弹出钥匙串访问窗口找到Charles Proxy CA证书双击打开展开信任将SSL设为始终信任关闭窗口输入密码确认回到 Charles打开Proxy → SSL Proxying Settings点击Add填入Host:prod-api.example.com你的目标域名支持*通配符Port:443✅Enable SSL Proxying提示如果目标域名是 IP如https://192.168.1.100:8443Charles 无法解密因为 SSL 证书绑定的是域名而非 IP。此时需让后端提供域名或改用 HTTP 协议联调仅限内网。4.2 规则改写实战用 Map Local 模拟三种持仓状态我们为用户持仓接口/api/v1/position创建三个 Mock 场景position-normal.json正常持仓2支股票position-empty.json空持仓data: nullposition-error.json服务端错误code: 500文件内容示例position-error.json{ code: 500, msg: Internal server error, data: null }Charles 配置Tools → Map Local点击Add填入Local Path:./mock/position-normal.jsonRemote Host:prod-api.example.comRemote Path:/api/v1/position✅Enable Map Local✅Also map HTTPS requests复制两行分别指向position-empty.json和position-error.json但Remote Path 保持相同—— Charles 会按顺序匹配第一个启用的规则生效。注意Map Local 规则有优先级越靠上的规则越先匹配。把最常用的normal放在最上面调试时只需开关它即可切换状态。4.3 断点拦截实战动态注入 Token 与模拟网络延迟金融接口普遍要求鉴权我们用 Breakpoint 注入X-Auth-Token并模拟弱网环境。步骤Proxy → Breakpoint Settings → AddLocation:https://prod-api.example.com/api/v1/*Type:Request✅Enable Breakpoint访问页面触发任意接口Charles 弹出 Breakpoint 窗口在Request Headers中添加X-Auth-Token:mock-token-123456切换到Response标签页点击Add Response DelayDelay:2000ms模拟 2 秒延迟点击Execute观察前端加载状态这样所有/api/v1/下的请求都带 Token 且有 2 秒延迟完美复现弱网体验。如果只想对特定接口延迟把 Location 改为精确 URL 即可。4.4 联调协同如何让后端同事“看到”你的 Mock 规则联调不是单打独斗。我习惯把 Charles 规则导出为.chls文件共享给后端File → Export Session...选择Charles Session Archive (.chls)文件包含所有历史请求、响应、Breakpoint 设置、Map Local 规则后端用 Charles 打开该文件就能看到你模拟了哪些数据、修改了哪些 Header更进一步我用Charles 的 Export → Export as HAR功能把关键请求导出为 HAR 文件HTTP Archive用在线工具如 https://www.softwareishard.com/har/viewer/可视化分析请求链路、耗时、Header直接发给后端“你看这个请求我收到了但响应里data是空数组你们确认下契约”。实操心得不要只发 JSON 文件给后端要发完整的请求上下文。有一次后端坚持说“接口没问题”我导出 HAR 发过去他一看请求里X-Trace-ID是mock-123立刻意识到是 Mock 环境问题而不是代码 Bug。5. 常见问题与排查技巧实录5.1 HTTPS 请求不走 Charles90% 是证书没信任现象Chrome 访问https://prod-api.example.comCharles 日志里没有记录Network 面板显示Pending。原因macOS/Windows 系统未信任 Charles 根证书浏览器拒绝建立 HTTPS 连接。排查步骤打开 Charles确认Proxy → SSL Proxying Settings中目标域名已启用在浏览器地址栏输入chls.pro/ssl下载并安装证书Charles 会自动跳转检查系统证书管理器macOS钥匙串访问 → 登录 → 证书 → 查找Charles Proxy CAWindowscertmgr.msc→ 受信任的根证书颁发机构双击证书 →信任→SSL设为始终信任重启浏览器和 Charles提示iOS 设备需在 Safari 中访问chls.pro/ssl然后在「设置→通用→关于本机→证书信任设置」中开启 Charles 证书。5.2 Map Local 生效但返回 404路径大小写或斜杠惹的祸现象配置了Remote Path: /api/v1/position但 Charles 日志显示404 Not Found。原因Charles 的 Map Local 匹配是严格字符串匹配包括大小写和末尾斜杠。排查方法在 Charles 日志中找到该请求右键 →Copy → Copy URL粘贴到文本编辑器对比你配置的Remote Path检查是否多了一个/如/api/v1/position/vs/api/v1/position是否大小写不一致如/API/v1/position是否有隐藏字符Windows 换行符\r\n解决方案用Rewrite替代 Map Local或在Remote Path中使用通配符*如/api/v1/position*。5.3 Breakpoint 不触发Location 配置太宽泛现象设置了Location: https://prod-api.example.com/*但只有部分请求触发 Breakpoint。原因*通配符只匹配路径不匹配 query 参数。如果请求是https://prod-api.example.com/api/v1/position?cache_bust123Charles 会忽略?后的内容但有时匹配不稳定。解决方案用精确 URLhttps://prod-api.example.com/api/v1/position或用正则https://prod-api\.example\.com/api/v1/position.*在Breakpoint Settings中勾选Match against full URLCharles 4.6 版本5.4 Mock 数据不更新缓存机制在作祟现象修改了position-empty.json但前端还是返回旧数据。原因浏览器或 Charles 缓存了响应。HTTP 缓存头如Cache-Control: max-age3600会让浏览器复用旧响应。排查与解决在 Charles 中选中该请求 → 右键 →Clear Cache在浏览器开发者工具 Network 面板勾选Disable cache在 Charles 的Proxy → Recording Settings中取消勾选Use browser cache给响应头加Cache-Control: no-cache通过 Rewrite 脚本5.5 金融类项目特殊问题WebSocket 连接被拦截现象股票行情用 WebSocketwss://prod-api.example.com/ws/tickCharles 里看不到连接。原因Charles 默认不代理 WebSocket 流量需手动开启。解决步骤Proxy → Recording Settings → Enable WebSocket recording确保wss://域名已在SSL Proxying Settings中启用如果仍不行尝试用ws://非加密协议联调或改用专用 WebSocket Mock 工具如websocketd实操心得金融项目对实时性要求高WebSocket Mock 很难做到毫秒级精度。我的建议是用 Charles Mock REST 接口验证业务逻辑用真实 WebSocket 服务验证性能两者分离。6. 进阶技巧用 Charles Node.js 构建动态 Mock 服务当 Mock 规则过于复杂如需数据库查询、调用第三方 API纯 Charles 难以胜任。这时我用 Node.js 搭建轻量 Mock 服务再用 Charles 的Map Remote将请求转发过去。例如模拟一个“根据用户 ID 返回定制化行情”的接口// mock-server.js const express require(express); const app express(); app.get(/api/v1/stock/custom, (req, res) { const userId req.query.userId; // 从内存数据库查用户偏好 const preferences { 1001: [600519, 000001], 1002: [300750, 601318] }; const symbols preferences[userId] || [600519]; // 调用真实行情 API此处用 mock 数据 const data symbols.map(symbol ({ symbol, price: 1000 Math.random() * 1000, change: (Math.random() - 0.5) * 2 })); res.json({ code: 0, data }); }); app.listen(3001, () console.log(Mock server running on http://localhost:3001));Charles 配置Tools → Map RemoteRemote Host:prod-api.example.comRemote Path:/api/v1/stock/customLocal Host:localhostLocal Port:3001✅Enable Map Remote这样所有对/api/v1/stock/custom的请求都被 Charles 转发到本地 Node.js 服务实现动态逻辑。Node.js 服务可连接 MySQL、Redis甚至调用 Wind 金融数据接口需申请 API Key真正打通数据闭环。最后分享一个小技巧我在团队里推行“Mock 规则即文档”。每个 Map Local/Rewrite 规则都配上注释说明模拟场景、触发条件、预期结果并存入 Git。新人入职第一天拉取代码后运行npm run mock:start再打开 Charles 加载规则集5 分钟就能跑通全流程——这才是 Mock 的终极价值让联调从“人肉协调”变成“机器可执行”。
Charles Proxy前端联调实战：规则改写与断点拦截
1. 这不是“造数据”而是前端联调的呼吸系统你有没有遇到过这样的场景后端接口还没交付UI设计稿已经堆满钉钉消息产品经理在群里所有人问“页面什么时候能跑起来”或者更糟——接口返回格式突然变了字段名从user_name改成userName前端所有页面集体报错而你翻遍文档也找不到最新契约又或者测试环境里某个支付回调总是500但日志里只有一行“内部错误”连具体哪一行抛异常都看不到。这时候Mock 不是锦上添花的玩具它是你每天能正常呼吸的氧气。我做前端开发和联调支持十年带过二十多个中大型项目从金融风控系统到电商秒杀平台最深的体会是真正的联调瓶颈从来不在代码写得对不对而在于“数据流是否可控、可追溯、可复现”。Mock 接口数据实操表面看是伪造返回值背后是一整套数据治理逻辑——规则改写解决的是“数据契约不一致”的问题断点拦截解决的是“请求路径不可见、不可干预”的问题而联调本身是把这两者拧成一股绳让前后端在同一个数据语境里对话。标题里的“规则改写”和“断点拦截”不是两个并列功能而是分属不同层级的控制能力规则改写作用于响应体Response Body它决定“我给你什么数据”断点拦截作用于请求链路Request Flow它决定“我让你发给谁、什么时候发、发完之后我怎么插手”。两者叠加才构成完整的“中间人”能力——你既不是纯客户端也不是纯服务端而是站在流量必经之路上的那个调度员。这个实操方案适合三类人一是刚接手老项目的前端面对一堆“祖传接口”不知从何下手二是需要快速验证 UI 交互逻辑的产品/设计师不想等后端排期三是测试工程师需要构造边界值、异常状态来压测业务流程。它不依赖后端配合不修改任何生产代码所有操作都在本地或测试环境完成但效果直逼真实联调。接下来我会用一个真实金融类项目模拟股票行情用户持仓查询贯穿全文把每一步背后的“为什么这么选”“踩过什么坑”“参数怎么算”全盘托出。2. 整体设计思路为什么不用 Axios Mock Adapter 或 Vite Mock Server先说结论Axios Mock Adapter 适合单元测试Vite Mock Server 适合开发阶段静态模拟但都不适合真实联调场景。这不是技术优劣问题而是定位错位。我试过在三个项目里强行用 Axios Mock Adapter 做联调第一个项目前端用 Vue3 TypeScript后端是 Java Spring Boot约定接口前缀/api/v1/。当时觉得 Mock Adapter 简单直接在main.ts里全局注册import axios from axios; import { mockAdapter } from ./mock/adapter; mockAdapter(axios); // 注册拦截器结果联调第一天就崩了——后端同事临时加了个/api/v1/stock/tick?symbol600519的实时行情接口但 Mock Adapter 只能按 URL 字符串匹配而真实请求带了动态 query 参数。我不得不写一堆正则去捕获symbol后面的值再手动拼 JSON 返回。更麻烦的是当后端改了响应结构比如把data字段从对象改成数组Mock 文件要同步改但没人通知我导致页面白屏两小时最后发现是 Mock 数据里少了一个list包裹层。Vite Mock Server 看似更智能它基于文件系统自动映射路由。比如建个mock/stock.tsexport default [ { url: /api/v1/stock/tick, method: get, response: ({ query }) { const symbol query.symbol; return { code: 0, data: { symbol, price: 1823.5, change: -0.23 } }; } } ]但它有个致命缺陷所有 Mock 规则必须提前写死无法在运行时动态修改。联调中期测试发现一个关键 bug当用户持仓为空时后端返回data: null但前端组件没做空值判断直接.map()报错。我想立刻模拟这个null场景但 Vite Mock Server 需要重启服务才能生效而此时后端正在紧急修复线上问题我连npm run dev都不敢敲——怕打断其他同事的调试。所以最终我们选了Charles Proxy 自定义 Map Local Breakpoint 拦截组合方案。理由很实在Charles 是 HTTP/HTTPS 流量代理它工作在 TCP 层之上、应用层之下所有浏览器、App、小程序发出的请求都必须经过它不依赖前端框架、不侵入业务代码、不改变构建流程Map Local 功能允许你把任意远程 URL 映射到本地 JSON 文件实现“规则改写”——比如把https://prod-api.example.com/api/v1/position映射到./mock/position-empty.json返回空数据Breakpoint 拦截则让你在请求发出前、响应返回前各设一个断点像手术刀一样精准切开流量在任意环节注入、修改、阻断数据——这才是“断点拦截”的真意不是简单开关而是实时干预。有人会问为什么不用 Fiddler 或 mitmproxyFiddler 在 macOS 上兼容性差mitmproxy 命令行操作门槛高而 Charles 的 GUI 对前端极其友好断点界面直观到连实习生都能上手。更重要的是它的 SSL Proxying 设置一次后续所有 HTTPS 请求自动解密省去证书安装的无数坑——这点在金融类项目里尤其关键因为所有接口都强制 HTTPS且证书校验严格。3. 核心细节解析规则改写与断点拦截的底层逻辑3.1 规则改写Map Local 不是“替换URL”而是“重定向响应源”很多人把 Charles 的 Map Local 理解成简单的 URL 替换比如“把 A 请求换成 B 请求”。这是误区。Map Local 的本质是HTTP 响应体劫持Response Body Hijacking它监听所有匹配规则的请求当请求到达 Charles 时Charles 并不转发给原始服务器而是直接读取你指定的本地文件把文件内容作为 HTTP 响应返回给客户端。这意味着请求头Headers、状态码Status Code、响应头Response Headers全部由你本地文件控制而不受原始服务器影响。这正是规则改写的威力所在。举个金融项目的真实例子后端有一个获取用户持仓的接口GET /api/v1/position生产环境返回HTTP/1.1 200 OK Content-Type: application/json; charsetutf-8 X-Request-ID: abc123 { code: 0, msg: success, data: [ { symbol: 600519, name: 贵州茅台, shares: 100, avg_cost: 1750.25 }, { symbol: 000001, name: 平安银行, shares: 500, avg_cost: 12.88 } ] }但测试发现当用户没有任何持仓时后端返回data: []而前端期望data: null。这时你不能只改 JSON 内容还要确保状态码是200Content-Type正确否则 Axios 会因 MIME 类型不匹配拒绝解析。正确做法是创建mock/position-empty.json{ code: 0, msg: success, data: null }然后在 Charles 中配置 Map LocalLocation:https://prod-api.example.com/api/v1/positionLocal Path:./mock/position-empty.json✅Enable Map Local✅Also map HTTPS requests必须勾选否则 HTTPS 请求不生效提示Map Local 规则匹配是精确字符串匹配不支持通配符。如果接口带 query 参数如/api/v1/position?userId123你需要把完整 URL 写进去或者用更灵活的Rewrite功能下文详述。3.2 断点拦截Breakpoint 不是“暂停”而是“流量闸门”Breakpoint 拦截常被误解为“让请求卡住”其实它是个双向阀门你可以在请求发出前Request修改请求参数、Header、Body也可以在响应返回前Response修改状态码、Header、Body。这才是“断点拦截”的完整能力。以股票行情接口为例后端提供/api/v1/stock/tick但要求所有请求必须带X-Auth-TokenHeader且 Token 必须是 JWT 格式。开发阶段后端还没提供 Token 生成服务你只能硬编码一个假 Token。但如果直接写死在代码里上线时容易忘记删造成安全风险。解决方案用 Breakpoint 在请求发出前注入 Header。步骤在 Charles 中打开Proxy → Breakpoint Settings点击Add填入Location:https://prod-api.example.com/api/v1/stock/tickType:Request✅Enable Breakpoint访问页面触发该接口请求Charles 会弹出 Breakpoint 窗口在Request Headers标签页点击Add Header输入Key:X-Auth-TokenValue:eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c示例 JWT点击Execute请求继续发送这样所有对该 URL 的请求都会自动带上 Token且只在 Charles 开启时生效代码里完全干净。更进一步你可以用Rewrite功能实现动态 Token 注入——比如从 localStorage 读取authToken但需配合 Charles 的 JavaScript 扩展稍后详解。注意Breakpoint 是逐次生效的每次请求都要手动点 Execute。如果想自动化必须用 Rewrite 或 Map Remote将请求转发到另一个 Mock 服务。但手动模式恰恰是优势——它强迫你“看见”每一次请求培养对数据流的敏感度。3.3 规则改写进阶Rewrite 功能解决动态参数难题Map Local 解决静态数据但真实接口充满动态参数/api/v1/stock/tick?symbol600519marketSH、/api/v1/order/create?order_idORD-20231001-001。为每个参数组合建一个 JSON 文件不现实。Charles 的Rewrite功能就是为此而生。它不是替换整个响应而是像正则引擎一样在响应体中查找、替换特定字符串或 JSON 路径。例如后端返回的股票价格是字符串1823.50但前端需要数字类型。你可以在 Rewrite 中添加规则Location:https://prod-api.example.com/api/v1/stock/tickType:Response BodyMatch Type:JSON PathJSON Path:$.data.priceReplace With:{{value}}→ 改为Number({{value}})但更实用的是动态响应生成。Charles 支持 JavaScript 脚本你可以在 Rewrite 中写 JS 逻辑// Rewrite Script for /api/v1/stock/tick function transform(response) { const body JSON.parse(response.body.toString()); // 根据 query 参数动态修改 price const symbol request.url.searchParams.get(symbol); if (symbol 600519) { body.data.price 1823.5 Math.random() * 10; // 模拟实时波动 } response.body JSON.stringify(body); return response; }这个脚本在每次响应返回前执行request对象包含完整请求信息URL、Headers、Bodyresponse对象可修改响应内容。它比 Map Local 灵活得多且无需重启 Charles。实操心得Rewrite 脚本调试困难Charles 不提供 console.log。我的技巧是先在浏览器控制台写好逻辑再复制进 Charles或者用alert(JSON.stringify(request))临时弹窗查看请求结构仅限开发机勿提交到团队。4. 实操过程从零搭建金融行情联调环境4.1 环境准备Charles 安装与 HTTPS 解密配置Charles 官网下载 macOS/Windows 版本Linux 用户可用charles-proxy包安装后首次启动会提示安装 SSL 证书。这一步必须做且必须信任证书否则所有 HTTPS 请求会失败。具体步骤以 macOS 为例Charles →Help → SSL Proxying → Install Charles Root Certificate系统弹出钥匙串访问窗口找到Charles Proxy CA证书双击打开展开信任将SSL设为始终信任关闭窗口输入密码确认回到 Charles打开Proxy → SSL Proxying Settings点击Add填入Host:prod-api.example.com你的目标域名支持*通配符Port:443✅Enable SSL Proxying提示如果目标域名是 IP如https://192.168.1.100:8443Charles 无法解密因为 SSL 证书绑定的是域名而非 IP。此时需让后端提供域名或改用 HTTP 协议联调仅限内网。4.2 规则改写实战用 Map Local 模拟三种持仓状态我们为用户持仓接口/api/v1/position创建三个 Mock 场景position-normal.json正常持仓2支股票position-empty.json空持仓data: nullposition-error.json服务端错误code: 500文件内容示例position-error.json{ code: 500, msg: Internal server error, data: null }Charles 配置Tools → Map Local点击Add填入Local Path:./mock/position-normal.jsonRemote Host:prod-api.example.comRemote Path:/api/v1/position✅Enable Map Local✅Also map HTTPS requests复制两行分别指向position-empty.json和position-error.json但Remote Path 保持相同—— Charles 会按顺序匹配第一个启用的规则生效。注意Map Local 规则有优先级越靠上的规则越先匹配。把最常用的normal放在最上面调试时只需开关它即可切换状态。4.3 断点拦截实战动态注入 Token 与模拟网络延迟金融接口普遍要求鉴权我们用 Breakpoint 注入X-Auth-Token并模拟弱网环境。步骤Proxy → Breakpoint Settings → AddLocation:https://prod-api.example.com/api/v1/*Type:Request✅Enable Breakpoint访问页面触发任意接口Charles 弹出 Breakpoint 窗口在Request Headers中添加X-Auth-Token:mock-token-123456切换到Response标签页点击Add Response DelayDelay:2000ms模拟 2 秒延迟点击Execute观察前端加载状态这样所有/api/v1/下的请求都带 Token 且有 2 秒延迟完美复现弱网体验。如果只想对特定接口延迟把 Location 改为精确 URL 即可。4.4 联调协同如何让后端同事“看到”你的 Mock 规则联调不是单打独斗。我习惯把 Charles 规则导出为.chls文件共享给后端File → Export Session...选择Charles Session Archive (.chls)文件包含所有历史请求、响应、Breakpoint 设置、Map Local 规则后端用 Charles 打开该文件就能看到你模拟了哪些数据、修改了哪些 Header更进一步我用Charles 的 Export → Export as HAR功能把关键请求导出为 HAR 文件HTTP Archive用在线工具如 https://www.softwareishard.com/har/viewer/可视化分析请求链路、耗时、Header直接发给后端“你看这个请求我收到了但响应里data是空数组你们确认下契约”。实操心得不要只发 JSON 文件给后端要发完整的请求上下文。有一次后端坚持说“接口没问题”我导出 HAR 发过去他一看请求里X-Trace-ID是mock-123立刻意识到是 Mock 环境问题而不是代码 Bug。5. 常见问题与排查技巧实录5.1 HTTPS 请求不走 Charles90% 是证书没信任现象Chrome 访问https://prod-api.example.comCharles 日志里没有记录Network 面板显示Pending。原因macOS/Windows 系统未信任 Charles 根证书浏览器拒绝建立 HTTPS 连接。排查步骤打开 Charles确认Proxy → SSL Proxying Settings中目标域名已启用在浏览器地址栏输入chls.pro/ssl下载并安装证书Charles 会自动跳转检查系统证书管理器macOS钥匙串访问 → 登录 → 证书 → 查找Charles Proxy CAWindowscertmgr.msc→ 受信任的根证书颁发机构双击证书 →信任→SSL设为始终信任重启浏览器和 Charles提示iOS 设备需在 Safari 中访问chls.pro/ssl然后在「设置→通用→关于本机→证书信任设置」中开启 Charles 证书。5.2 Map Local 生效但返回 404路径大小写或斜杠惹的祸现象配置了Remote Path: /api/v1/position但 Charles 日志显示404 Not Found。原因Charles 的 Map Local 匹配是严格字符串匹配包括大小写和末尾斜杠。排查方法在 Charles 日志中找到该请求右键 →Copy → Copy URL粘贴到文本编辑器对比你配置的Remote Path检查是否多了一个/如/api/v1/position/vs/api/v1/position是否大小写不一致如/API/v1/position是否有隐藏字符Windows 换行符\r\n解决方案用Rewrite替代 Map Local或在Remote Path中使用通配符*如/api/v1/position*。5.3 Breakpoint 不触发Location 配置太宽泛现象设置了Location: https://prod-api.example.com/*但只有部分请求触发 Breakpoint。原因*通配符只匹配路径不匹配 query 参数。如果请求是https://prod-api.example.com/api/v1/position?cache_bust123Charles 会忽略?后的内容但有时匹配不稳定。解决方案用精确 URLhttps://prod-api.example.com/api/v1/position或用正则https://prod-api\.example\.com/api/v1/position.*在Breakpoint Settings中勾选Match against full URLCharles 4.6 版本5.4 Mock 数据不更新缓存机制在作祟现象修改了position-empty.json但前端还是返回旧数据。原因浏览器或 Charles 缓存了响应。HTTP 缓存头如Cache-Control: max-age3600会让浏览器复用旧响应。排查与解决在 Charles 中选中该请求 → 右键 →Clear Cache在浏览器开发者工具 Network 面板勾选Disable cache在 Charles 的Proxy → Recording Settings中取消勾选Use browser cache给响应头加Cache-Control: no-cache通过 Rewrite 脚本5.5 金融类项目特殊问题WebSocket 连接被拦截现象股票行情用 WebSocketwss://prod-api.example.com/ws/tickCharles 里看不到连接。原因Charles 默认不代理 WebSocket 流量需手动开启。解决步骤Proxy → Recording Settings → Enable WebSocket recording确保wss://域名已在SSL Proxying Settings中启用如果仍不行尝试用ws://非加密协议联调或改用专用 WebSocket Mock 工具如websocketd实操心得金融项目对实时性要求高WebSocket Mock 很难做到毫秒级精度。我的建议是用 Charles Mock REST 接口验证业务逻辑用真实 WebSocket 服务验证性能两者分离。6. 进阶技巧用 Charles Node.js 构建动态 Mock 服务当 Mock 规则过于复杂如需数据库查询、调用第三方 API纯 Charles 难以胜任。这时我用 Node.js 搭建轻量 Mock 服务再用 Charles 的Map Remote将请求转发过去。例如模拟一个“根据用户 ID 返回定制化行情”的接口// mock-server.js const express require(express); const app express(); app.get(/api/v1/stock/custom, (req, res) { const userId req.query.userId; // 从内存数据库查用户偏好 const preferences { 1001: [600519, 000001], 1002: [300750, 601318] }; const symbols preferences[userId] || [600519]; // 调用真实行情 API此处用 mock 数据 const data symbols.map(symbol ({ symbol, price: 1000 Math.random() * 1000, change: (Math.random() - 0.5) * 2 })); res.json({ code: 0, data }); }); app.listen(3001, () console.log(Mock server running on http://localhost:3001));Charles 配置Tools → Map RemoteRemote Host:prod-api.example.comRemote Path:/api/v1/stock/customLocal Host:localhostLocal Port:3001✅Enable Map Remote这样所有对/api/v1/stock/custom的请求都被 Charles 转发到本地 Node.js 服务实现动态逻辑。Node.js 服务可连接 MySQL、Redis甚至调用 Wind 金融数据接口需申请 API Key真正打通数据闭环。最后分享一个小技巧我在团队里推行“Mock 规则即文档”。每个 Map Local/Rewrite 规则都配上注释说明模拟场景、触发条件、预期结果并存入 Git。新人入职第一天拉取代码后运行npm run mock:start再打开 Charles 加载规则集5 分钟就能跑通全流程——这才是 Mock 的终极价值让联调从“人肉协调”变成“机器可执行”。