[{"data":1,"prerenderedAt":50},["ShallowReactive",2],{"case-mock-map-route-split-api-zh":3,"blog-list-zh":13},{"slug":4,"title":5,"summary":6,"date":7,"featured":8,"seoDescription":9,"series":10,"seriesOrder":11,"html":12},"mock-map-route-split-api","API 已迁新服务，前端还没发版？用「转发规则」联调","服务拆分后，前端仍请求旧 API，订单接口却已经迁到新服务。使用 DevPeek「转发规则」无需修改前端代码，即可把指定接口转发到新域名；若新服务未完成，还可以用 Mock 先跑通页面。","2026-07-26",false,"微服务联调与 API 域名迁移：用 DevPeek「转发规则」做 API 转发，不改前端即可把旧域名请求指到新服务；服务迁移未完成时可用 Mock 先验页面。附接口联调 Demo。","api-debug-new-tricks",2,"\u003Cp>微服务拆分做到一半，是很多团队都会遇到的联调场景。\u003C\u002Fp>\n\u003Cp>后端已经把订单服务迁到了 \u003Ccode>b.api.example.com\u003C\u002Fcode>，但线上 H5 还在请求 \u003Ccode>a.api.example.com\u003C\u002Fcode>。结果就是：用户接口正常、订单统计正常，唯独订单列表返回 501。\u003C\u002Fp>\n\u003Cp>这种时候，问题并不是接口坏了，而是前端和后端还没有完成同一次发版。\u003C\u002Fp>\n\u003Cp>等后端迁移完成、等前端发版，再重新联调——往往要排期。接口联调窗口里更现实的做法是：\u003Cstrong>让浏览器继续请求旧 API，由 DevPeek 在代理层配置「转发规则」，把指定 path 指到新域名\u003C\u002Fstrong>；若新服务暂时连不上，还可以用 \u003Cstrong>Mock\u003C\u002Fstrong> 先短路响应，把页面 UI 跑通。\u003C\u002Fp>\n\u003Cp>本文用 \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FGYPengDev\u002Fdevpeek.demo\">devpeek.demo\u003C\u002Fa> 里的 \u003Cstrong>mock-map-route-demo\u003C\u002Fstrong> 案例，演示一次完整的\u003Cstrong>服务迁移联调\u003C\u002Fstrong>：「转发规则」与 Mock 两条路怎么走，以及规则里 \u003Cstrong>path 前缀\u003C\u002Fstrong>、\u003Cstrong>port 匹配\u003C\u002Fstrong>与\u003Cstrong>端口继承\u003C\u002Fstrong>怎么写。\u003C\u002Fp>\n\u003Ch2>适用读者\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>微服务 \u002F API 域名迁移进行中，前端暂时不能改 API 基址\u003C\u002Fli>\n\u003Cli>已会用 DevPeek 抓包，想试「转发规则」或 Mock\u003C\u002Fli>\n\u003Cli>读过 \u003Ca href=\"\u002Fblog\u002Fapi-param-encryption-debug\u002F\">参数转换那篇\u003C\u002Fa>，希望继续看「代理链上还能做什么」\u003C\u002Fli>\n\u003Cli>还没完成第一次抓包：先看 \u003Ca href=\"\u002Fblog\u002Finstall-first-capture\u002F\">零基础上手：安装 DevPeek 并抓到第一个包\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>前置：代理、证书与系统代理\u003C\u002Fh2>\n\u003Cp>本文 Demo 跑在本机浏览器，流量须先经过 DevPeek 代理，「转发规则」才会生效。\u003C\u002Fp>\n\u003Col>\n\u003Cli>\u003Cstrong>安装 DevPeek\u003C\u002Fstrong> 并确认代理端口（默认见标题栏 \u002F 设置）。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>设为系统代理\u003C\u002Fstrong>：菜单 \u003Cstrong>代理 → 设为系统代理\u003C\u002Fstrong>（本机浏览器抓包时用；抓手机则改 Wi‑Fi 代理，见 \u003Ca href=\"\u002Fdocs\u002Fquick-start\u002F\">快速上手\u003C\u002Fa>）。\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>\u003Cimg src=\"\u002Fdocs\u002Ffigures\u002Fdemo2\u002Fdemo2-menu-system-proxy.png\" alt=\"设为系统代理\">\u003C\u002Fp>\n\u003Cp>\u003Cem>本机联调时在 DevPeek 菜单开启系统代理即可。\u003C\u002Fem>\u003C\u002Fp>\n\u003Col start=\"3\">\n\u003Cli>\u003Cstrong>安装并信任根证书\u003C\u002Fstrong>：DevPeek → \u003Cstrong>证书管理\u003C\u002Fstrong>，按提示安装到「受信任的根证书颁发机构」。否则 HTTPS 只能看到 CONNECT 隧道，看不到明文请求与响应。完整步骤见 \u003Ca href=\"\u002Fblog\u002Finstall-first-capture\u002F\">零基础上手\u003C\u002Fa> 与 \u003Ca href=\"\u002Fdocs\u002Fproxy-ssl\u002F\">代理与 SSL 证书\u003C\u002Fa>。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>（可选）\u003C\u002Fstrong> 若抓 HTTPS 业务域名，把对应 Host 加入 \u003Cstrong>SSL 解密范围\u003C\u002Fstrong>（本 Demo 为 \u003Ccode>http:\u002F\u002F*.demo.test:3002\u003C\u002Fcode>，纯 HTTP，可跳过）。\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>\u003Cstrong>完成标准：\u003C\u002Fstrong> 打开任意网页，DevPeek 抓包列表里能看到对应 HTTP(S) 记录。\u003C\u002Fp>\n\u003Ch2>案例场景：三个域名，一套服务\u003C\u002Fh2>\n\u003Cp>Demo 在本地 \u003Ccode>:3002\u003C\u002Fcode> 起了一个 Express，用 \u003Cstrong>Host 头\u003C\u002Fstrong>区分「旧 API」「新 API」和「页面」——模拟典型的 \u003Cstrong>API 域名迁移\u003C\u002Fstrong> 中间态：\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>域名\u003C\u002Fth>\n\u003Cth>角色\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>\u003Ccode>page.demo.test\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>打开 H5 页面\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>a.api.demo.test\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>前端硬编码的 API（旧）\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>b.api.demo.test\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>订单接口所在（新）\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Cp>接口行为（简化）：\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>接口\u003C\u002Fth>\n\u003Cth>a.api\u003C\u002Fth>\n\u003Cth>b.api\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>\u003Ccode>GET \u002Fapi\u002Fuser\u002Fprofile\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>✅ 200\u003C\u002Ftd>\n\u003Ctd>✅ 200\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>GET \u002Fapi\u002Forders\u002Fstats\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>✅ 200\u003C\u002Ftd>\n\u003Ctd>✅ 200\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>GET \u002Fapi\u002Forders\u002Flist\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>❌ 501\u003C\u002Ftd>\n\u003Ctd>✅ 200\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Cp>前端 \u003Ccode>script.js\u003C\u002Fcode> 里三个请求都写死为 \u003Ccode>http:\u002F\u002Fa.api.demo.test:3002\u002F...\u003C\u002Fcode>。未配「转发规则」时，页面底部订单区会显示 501 和提示文案——这就是服务拆分进行中的常态。\u003C\u002Fp>\n\u003Ch2>步骤一：跑起 Demo\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-bash\">git clone https:\u002F\u002Fgithub.com\u002FGYPengDev\u002Fdevpeek.demo.git\ncd devpeek.demo\npnpm install\npnpm --filter @devpeek\u002Fmock-map-route-demo dev\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cstrong>hosts\u003C\u002Fstrong>（三域名都指本机）：\u003C\u002Fp>\n\u003Cpre>\u003Ccode>127.0.0.1  page.demo.test a.api.demo.test b.api.demo.test\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>浏览器打开 \u003Ccode>http:\u002F\u002Fpage.demo.test:3002\u002F\u003C\u002Fcode>，点 \u003Cstrong>🔄 重新检测\u003C\u002Fstrong>。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>此时不要开启任何「转发规则」\u003C\u002Fstrong>——先确认基线：订单接口在旧域名上确实 501。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>完成标准：\u003C\u002Fstrong> 用户信息、订单统计加载成功；订单列表显示 \u003Cstrong>a.api — 501 未实现\u003C\u002Fstrong>；进度条停在步骤 1。\u003C\u002Fp>\n\u003Cp>在 DevPeek 抓包列表里，此时 \u003Ccode>a.api.demo.test\u003C\u002Fcode> 的 \u003Ccode>\u002Fapi\u002Forders\u002Flist\u003C\u002Fcode> 仍返回 501：\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fdocs\u002Ffigures\u002Fdemo2\u002Fdemo2-a-api-before-forward-list.png\" alt=\"未配置转发时的抓包列表\">\u003C\u002Fp>\n\u003Cp>\u003Cem>列表里 Host 仍是 a.api；订单接口 501。\u003C\u002Fem>\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fdocs\u002Ffigures\u002Fdemo2\u002Fdemo2-a-api-before-forward-501-response.png\" alt=\"未转发时的 501 响应体\">\u003C\u002Fp>\n\u003Cp>\u003Cem>响应体提示 a.api 未实现，需通过「转发规则」转到 b.api。\u003C\u002Fem>\u003C\u002Fp>\n\u003Ch2>步骤二：「转发规则」— 只转发订单相关 path\u003C\u002Fh2>\n\u003Cp>入口：\u003Cstrong>规则 → 「转发规则」\u003C\u002Fstrong>（或抓包页左侧 \u003Cstrong>转发\u003C\u002Fstrong> 面板）。\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fdocs\u002Ffigures\u002Fdemo2\u002Fdemo2-menu-forward-rules.png\" alt=\"「转发规则」入口\">\u003C\u002Fp>\n\u003Cp>添加一行（制表符或空格分隔）：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">a.api.demo.test:3002\u002Fapi\u002Forders    b.api.demo.test\u002Fapi\u002Forders\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>这条规则表示：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>匹配侧\u003C\u002Fstrong>写了 \u003Ccode>:3002\u003C\u002Fcode>，只匹配 Host 为 \u003Ccode>a.api.demo.test:3002\u003C\u002Fcode> 的请求；不写 port 则匹配任意端口。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>目标侧\u003C\u002Fstrong>没写 port，\u003Cstrong>继承请求端口\u003C\u002Fstrong>（这里是 3002），不必两边都写死 \u003Ccode>:3002\u003C\u002Fcode>。\u003C\u002Fli>\n\u003Cli>只匹配 \u003Ccode>\u002Fapi\u002Forders\u003C\u002Fcode> 及其子 path（如 \u003Ccode>\u002Fapi\u002Forders\u002Flist\u003C\u002Fcode>）；\u003Ccode>\u002Fapi\u002Fuser\u002Fprofile\u003C\u002Fcode> 仍走 a.api。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cimg src=\"\u002Fdocs\u002Ffigures\u002Fdemo2\u002Fdemo2-forward-rule-filled.png\" alt=\"「转发规则」中的端口继承\">\u003C\u002Fp>\n\u003Cp>\u003Cem>匹配侧写了 \u003Ccode>:3002\u003C\u002Fcode>，目标侧只写 host——上游端口继承自请求。\u003C\u002Fem>\u003C\u002Fp>\n\u003Cp>保存后，path 级规则在窗口里应类似：\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fdocs\u002Ffigures\u002Fdemo2\u002Fdemo2-forward-rule-filled-with-port.png\" alt=\"path 级「转发规则」示例\">\u003C\u002Fp>\n\u003Cp>\u003Cem>只转发 \u003Ccode>\u002Fapi\u002Forders\u003C\u002Fcode> 及其子 path；\u003Ccode>\u002Fapi\u002Fuser\u002Fprofile\u003C\u002Fcode> 仍走 a.api。\u003C\u002Fem>\u003C\u002Fp>\n\u003Cp>若整站 API 都已迁到新域名，可以用 \u003Cstrong>host 级\u003C\u002Fstrong>规则，a 下所有子路由原样转到 b：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">a.api.demo.test:3002    b.api.demo.test\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>（目标侧同样可省略 port，继承请求端口。）\u003C\u002Fp>\n\u003Cp>确认 \u003Ca href=\"#%E5%89%8D%E7%BD%AE%E4%BB%A3%E7%90%86%E8%AF%81%E4%B9%A6%E4%B8%8E%E7%B3%BB%E7%BB%9F%E4%BB%A3%E7%90%86\">系统代理已开启\u003C\u002Fa>（上文），回到页面点 \u003Cstrong>重新检测\u003C\u002Fstrong>。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>完成标准：\u003C\u002Fstrong> 订单列表出现表格数据；页面状态显示转发已生效；终端日志类似：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">→ [GET] Host: b.api.demo.test:3002  \u002Fapi\u002Forders\u002Flist\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>抓包详情 \u003Cstrong>概览\u003C\u002Fstrong> 里会出现 \u003Cstrong>转发 URL\u003C\u002Fstrong>，表示实际上游已打到 b.api，列表里仍保留浏览器原始 URL，便于对照契约。详见 \u003Ca href=\"\u002Fdocs\u002Fmap-route\u002F\">「转发规则」文档\u003C\u002Fa>。\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fdocs\u002Ffigures\u002Fdemo2\u002Fdemo2-a-api-after-forward-list.png\" alt=\"转发生效后的抓包列表\">\u003C\u002Fp>\n\u003Cp>\u003Cem>同一条请求：列表仍显示 a.api，详情里可看实际上游。\u003C\u002Fem>\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fdocs\u002Ffigures\u002Fdemo2\u002Fdemo2-a-api-after-forward-detail.png\" alt=\"请求详情中的转发 URL\">\u003C\u002Fp>\n\u003Cp>\u003Cem>概览中的「转发 URL」指向 b.api.demo.test:3002。\u003C\u002Fem>\u003C\u002Fp>\n\u003Ch2>步骤三（可选）：Mock — 新服务还没起来时\u003C\u002Fh2>\n\u003Cp>若 b.api 暂时不可达，但你想先验订单列表 UI，可以对 \u003Ccode>GET ...\u002Fapi\u002Forders\u002Flist\u003C\u002Fcode> 建一条 \u003Cstrong>自动 Mock\u003C\u002Fstrong>，直接返回 JSON（页面底部「Mock 备选方案」有示例数据）。\u003C\u002Fp>\n\u003Ch3>「转发规则」和 Mock 的区别\u003C\u002Fh3>\n\u003Cp>很多人第一次做\u003Cstrong>微服务联调\u003C\u002Fstrong>都会纠结：该用「转发规则」，还是直接 Mock？\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>\u003C\u002Fth>\n\u003Cth>「转发规则」\u003C\u002Fth>\n\u003Cth>Mock\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>是否访问真实上游\u003C\u002Ftd>\n\u003Ctd>✅ 是\u003C\u002Ftd>\n\u003Ctd>❌ 否（短路）\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>典型用途\u003C\u002Ftd>\n\u003Ctd>新服务已就绪，做 API 转发\u003C\u002Ftd>\n\u003Ctd>服务迁移未完成，先验页面\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>匹配依据\u003C\u002Ftd>\n\u003Ctd>host + path + port\u003C\u002Ftd>\n\u003Ctd>Mock 规则（URL、Method 等）\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Cp>「转发规则」在代理层把请求\u003Cstrong>真连\u003C\u002Fstrong>到新服务，适合新域名已部署、只是前端还没发版。Mock 则\u003Cstrong>短路\u003C\u002Fstrong>上游，适合接口联调时新服务尚未就绪、只想先看 UI。\u003C\u002Fp>\n\u003Cp>两者可组合：先配「转发规则」指到测试机，再对某 path Mock 错误码。配置入口见 \u003Ca href=\"\u002Fdocs\u002Fmock\u002F\">Mock 规则\u003C\u002Fa>。\u003C\u002Fp>\n\u003Ch2>「转发规则」语法\u003C\u002Fh2>\n\u003Cp>一条规则由 \u003Cstrong>匹配地址（Pattern）\u003C\u002Fstrong> 和 \u003Cstrong>目标地址（Target）\u003C\u002Fstrong> 两部分组成，写法为：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">Pattern → Target\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>地址格式：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">[http(s):\u002F\u002F]host[:port][\u002FpathPrefix]\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>维度\u003C\u002Fth>\n\u003Cth>匹配侧（Pattern）\u003C\u002Fth>\n\u003Cth>目标侧（Target）\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>\u003Cstrong>port\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd>写了则必须等于请求端口；不写则任意端口\u003C\u002Ftd>\n\u003Ctd>写了则固定；\u003Cstrong>不写则继承请求 Host 端口\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cstrong>path\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd>写了则只匹配该前缀及子 path；不写则整站 host\u003C\u002Ftd>\n\u003Ctd>可与 Pattern 不同，用于 path 重写\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cstrong>scheme\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd>写了 \u003Ccode>http:\u002F\u002F\u003C\u002Fcode> \u002F \u003Ccode>https:\u002F\u002F\u003C\u002Fcode> 则须一致\u003C\u002Ftd>\n\u003Ctd>指本地 HTTP 时建议写 \u003Ccode>http:\u002F\u002F\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Cp>\u003Cstrong>优先级：\u003C\u002Fstrong> 最长 path 前缀优先；同 path 时，带 port 的规则更具体。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>path 重写示例\u003C\u002Fstrong>（进阶）：若请求 path 与上游 path 结构不一致，可写：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">a.example.com\u002Froute1\u002Froute2    b.example.com\u002Froute1\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>请求 \u003Ccode>\u002Froute1\u002Froute2\u002Forders\u002Flist\u003C\u002Fcode> → 上游 \u003Ccode>\u002Froute1\u002Forders\u002Flist\u003C\u002Fcode>（去掉匹配前缀，余下部分拼到目标前缀后）。\u003C\u002Fp>\n\u003Cp>CONNECT 隧道仅应用\u003Cstrong>无 path\u003C\u002Fstrong> 的主机级规则；HTTP(S) 请求才走 path 级匹配。\u003C\u002Fp>\n\u003Ch2>和抓包、页面调试在同一条链\u003C\u002Fh2>\n\u003Cp>「转发规则」只修改代理层的目标地址，\u003Cstrong>不会修改浏览器发起的请求 URL\u003C\u002Fstrong>。抓包列表里仍显示客户端原始 Host 与 path。因此：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Mock 仍按抓包列表里的 URL 匹配；\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"\u002Fdocs\u002Fdebug-replay\u002F\">移动端网页调试\u003C\u002Fa> 里点按钮触发的请求，同样经过转发；\u003C\u002Fli>\n\u003Cli>与 \u003Ca href=\"\u002Fdocs\u002Fparam-transform\u002F\">参数转换\u003C\u002Fa> 组合：先转发到测试环境，再解密参数、改 Mock。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>典型\u003Cstrong>接口联调\u003C\u002Fstrong>顺序：\u003Cstrong>「转发规则」（指到正确服务）→ 参数转换（看明文）→ Mock（模拟异常）\u003C\u002Fstrong>。\u003C\u002Fp>\n\u003Ch2>容易卡住的地方\u003C\u002Fh2>\n\u003Cp>\u003Cstrong>订单仍 501\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>「转发规则」是否保存且未注释（行首 \u003Ccode>#\u003C\u002Fcode>）？\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"#%E5%89%8D%E7%BD%AE%E4%BB%A3%E7%90%86%E8%AF%81%E4%B9%A6%E4%B8%8E%E7%B3%BB%E7%BB%9F%E4%BB%A3%E7%90%86\">系统代理\u003C\u002Fa>是否已开启？\u003C\u002Fli>\n\u003Cli>path 是否写对：订单是 \u003Ccode>\u002Fapi\u002Forders\u002Flist\u003C\u002Fcode>，规则前缀至少要到 \u003Ccode>\u002Fapi\u002Forders\u003C\u002Fcode>。\u003C\u002Fli>\n\u003Cli>本地 dev 端口：匹配侧建议写 \u003Ccode>:3002\u003C\u002Fcode>，或确认请求 Host 与规则一致。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cstrong>用户\u002F统计也挂了\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>若用了 \u003Cstrong>host 级\u003C\u002Fstrong>整站转发，确认 b.api 上 profile\u002Fstats 也可用；否则改用 \u003Cstrong>path 级\u003C\u002Fstrong>，只转发 \u003Ccode>\u002Fapi\u002Forders\u003C\u002Fcode>。\u003C\u002Fli>\n\u003Cli>检查 hosts 是否包含 \u003Ccode>a.api.demo.test\u003C\u002Fcode>。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cstrong>概览没有「转发 URL」\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>该请求未命中任何「转发规则」，或目标 host:port 与原始完全相同（视为未转发）。见 \u003Ca href=\"\u002Fdocs\u002Ffaq\u002F\">常见问题\u003C\u002Fa>。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>下一篇\u003C\u002Fh2>\n\u003Cp>\u003Cstrong>《待整理：代理链上的断点、重发与协作》\u003C\u002Fstrong>——继续补充联调技巧。\u003C\u002Fp>\n\u003Chr>\n\u003Cp>如果你也遇到过「后端已经迁服务、前端却还没发版」的联调问题，不妨 \u003Ca href=\"\u002F\">下载 DevPeek\u003C\u002Fa>，按照本文的 Demo 跑一遍。从「转发规则」到 Mock 验页面，全程无需改一行前端代码。案例源码见 \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FGYPengDev\u002Fdevpeek.demo\u002Ftree\u002Fmain\u002Fcases\u002Fmock-map-route-demo\">devpeek.demo \u002F mock-map-route-demo\u003C\u002Fa>，也欢迎到 \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FGYPengDev\u002Fdevpeek\u002Fdiscussions\">GitHub Discussions\u003C\u002Fa> 聊聊你的 \u003Cstrong>API 域名迁移\u003C\u002Fstrong> 方案。\u003C\u002Fp>\n\u003Ch2>相关文档\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"\u002Fdocs\u002Fmap-route\u002F\">「转发规则」\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"\u002Fdocs\u002Fmock\u002F\">Mock 规则\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"\u002Fdocs\u002Fcapture\u002F\">抓包界面与请求详情\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"\u002Fdocs\u002Fproxy-ssl\u002F\">代理与 SSL 证书\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"\u002Fdocs\u002Fquick-start\u002F\">快速上手\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"\u002Fblog\u002Finstall-first-capture\u002F\">零基础上手：安装 DevPeek 并抓到第一个包\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>系列文章\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"\u002Fblog\u002Fapi-param-encryption-debug\u002F\">H5 接口参数加密？DevPeek 一键解密调试\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n",{"items":14},[15,16,23,31,37,44],{"slug":4,"title":5,"summary":6,"date":7,"featured":8,"seoDescription":9,"series":10,"seriesOrder":11},{"slug":17,"title":18,"summary":19,"date":20,"featured":8,"seoDescription":21,"series":10,"seriesOrder":22},"api-param-encryption-debug","H5 接口参数加密？DevPeek 一键解密调试","联调时接口参数 AES 加密看不到明文？用 DevPeek 参数转换功能，填好密钥和 IV 就能自动解密，还能改参重放。","2026-07-18","用 DevPeek 参数转换功能解密 AES-GCM 加密的 H5 API 请求，支持双向转换、明文编辑、调试重放。",1,{"slug":24,"title":25,"summary":26,"date":27,"featured":28,"seoDescription":29,"series":30,"seriesOrder":11},"h5-debug-console-mock","H5 调试实战（二）：Android WebView 白屏排查，从 Console 远程定位到 Mock 验证","活动 H5 在部分 Android 设备中点击按钮后白屏，请求全部 200 却没有页面反馈。通过 DevPeek Console 获取线上 WebView 运行日志，远程 eval 确认 polyfill 覆盖问题，再使用 Mock 验证异常状态下的降级页面。","2026-07-13",true,"H5 调试实战第二篇：排查 Android WebView 白屏问题。通过 Console 远程调试定位 JavaScript polyfill 兼容问题，并结合 Mock 验证接口异常场景下的页面降级逻辑。","h5-debug",{"slug":32,"title":33,"summary":34,"date":35,"featured":28,"seoDescription":36,"series":30,"seriesOrder":22},"wechat-h5-storage-debug","H5 调试实战（一）：微信 H5 localStorage 调试，在电脑上修改真机缓存","微信 H5 换测试号后头像仍显示旧用户，抓包确认接口正常，却定位到 localStorage 遗留旧数据。本文记录一次真实联调过程，以及如何在电脑上查看、修改微信 WebView 的 localStorage、sessionStorage 和 IndexedDB。","2026-07-11","微信 H5 调试实战：通过真实案例定位 localStorage、sessionStorage、IndexedDB 导致的数据缓存问题，对比 vConsole、Remote Debug 等方案，介绍真机 WebView 调试思路。",{"slug":38,"title":39,"summary":40,"date":41,"featured":28,"seoDescription":42,"series":43,"seriesOrder":11},"why-we-built-devpeek-h5-debug","我们为什么做 DevPeek（二）：App 里那页 H5，在电脑上也能对着查","登录接口用参数转换啃下来了，活动页 H5 却在 App WebView 里才崩。真机 remote debug 折腾一圈，DOM 和抓包还是两拨窗口——于是把镜像和自研调试面板收进 DevPeek。","2026-07-10","DevPeek 起源系列第二篇：App 内嵌 H5 只在真机出问题、remote debug 与抓包割裂的联调痛点，以及调试 Tab 如何把页面镜像到电脑并用自研面板查 DOM、Console 与 Network。","origin",{"slug":45,"title":46,"summary":47,"date":48,"featured":28,"seoDescription":49,"series":43,"seriesOrder":22},"why-we-built-devpeek","我们为什么做 DevPeek（一）：HTTPS 解密了，Body 还是天书","版本日前那晚，TLS 早就解开了，改请求里一个字段却还要翻脚本加解密。于是萌生做一个把业务加解密收进代理的工具——DevPeek 从这儿开始。","2026-07-09","DevPeek 起源系列第一篇：联调时请求体加解密的手工折腾，以及为什么先做一款把业务加解密收进代理的工具。",1785001468310]