跨域代理助手 - CORS 跨域调试 · API 环境切换 · Mock

前端跨域联调不用改代码，也不用请后端改 CORS：把 API 请求代理到 FAT/UAT/PROD 环境，支持 URL、请求头与响应改写、条件化 Mock、延迟、阻断、重试与 WebSocket 转发

前端连着 FAT，要验的改动只在 UAT——这个扩展让你在浏览器里加一条规则就完成跨环境联调：不用改应用代码，不用在每个项目里维护 devServer 代理表，也不用请后端加一条 CORS 配置再发一次版。 如果你遇到过下面任意一种情况，它能直接省掉那一步： - 控制台报 blocked by CORS policy / Access-Control-Allow-Origin，而后端不是你负责部署的 - 本地 localhost 起的页面要调内网测试环境的接口 - 接口还没写好，前端要先把界面跑通 - 要验证超时、500、断网时的兜底 UI，却没法让后端配合制造这些情况 - 想给请求换一套目标环境的鉴权 token，又不想把它写进代码里 - 实时功能（WebSocket）也要跟着同一套环境切换走 - 想把一整套联调配置交给同事，而不是靠口述和截图 它能做什么： - 按通配符、前缀或正则匹配请求地址，转发到你指定的另一个环境 - 注入或替换请求头（例如目标环境的鉴权 token），替换请求体 - 按规则携带目标环境的 Cookie（默认关闭）：开启后由扩展以 credentials: 'include' 代发，带上你在该环境已有的会话，不必把 Cookie 抄进请求头覆盖 - 响应改写：替换响应状态码、响应头，或按路径替换 JSON 里的某个字段（如 data.token） - 假数据 / Mock：接口还没写好时，直接返回你准备的 JSON / 文本 / HTML / XML - 条件化 Mock：一条规则里配多个条件（URL 正则、请求方法、查询参数），首个命中的条件决定响应体、状态码与 Content-Type - 注入 0–60000 毫秒延迟模拟弱网，用来验证骨架屏、加载态与超时处理 - 阻断请求，用来验证异常提示与离线兜底；被阻断的请求不会被回退重发 - 失败自动重试：网络错误、5xx 响应与单次 30 秒超时都会触发，重试 1–5 次、间隔 100–30000 毫秒可调 - 按 HTTP 方法限定规则（GET/POST/PUT/DELETE/PATCH/OPTIONS/HEAD），或在代理后的地址上追加、覆盖查询参数（灰度标识、__env=uat） - 转发 WebSocket 长连接，让实时功能跟着同一套环境走 - 只做 URL 重写的简单规则由浏览器网络层完成（declarativeNetRequest），不给页面增加脚本开销；关闭总开关时这层规则一并卸载，不会留下隐形重定向 规则是怎么被选中的： - 列表顺序就是优先级，数值越小越先匹配；一条请求只交给第一条命中的规则，后面的规则不再参与评估 - 「URL 匹配测试」会把同样命中这条地址、但排在它后面的规则一并列出来，调整顺序前先看这里 - 目标地址留空表示不换环境，只把这条请求交给扩展代发——需要改写请求头或响应、又不想换地址时用它 典型配置（示例域名换成你自己的）： - 跨环境转发：匹配 https://fat-api.example.com/* → 目标 https://uat-api.example.com - 换目标环境的鉴权：在上面这条里加一个请求头覆盖 Authorization: Bearer <你的 UAT token> - 接口未就绪：开启 Mock，状态 200、Content-Type application/json、响应体贴你的示例 JSON - 弱网与超时：开启延迟，填 3000–8000 毫秒 - 异常兜底：开启阻断，或把响应状态码改写成 500 - 灰度与 A/B：在代理后的地址上追加查询参数 __env=uat - 只把写操作打到测试环境：把规则限定在 POST / PUT / DELETE 谁会用上它： - 前端：后端接口还在别人手里，你要先把页面跑完——用代理换环境，用 Mock 顶替未就绪的接口 - 全栈：本地起的服务要调内网测试环境，不想在每个项目里维护一份 devServer 代理表 - 测试与联调支持：要复现超时、5xx、断网和慢网络，开延迟与阻断就能造出来，不用请后端配合 - 做多环境或灰度：用查询参数注入打灰度标识，用环境快照在 FAT / UAT / PROD 之间一键切换 - 要把配置交出去：JSON 导出、HAR 录制转规则、cURL 粘贴建规则，同事导入就是同一套 调试与协作： - 请求日志记录方法、状态、耗时与命中的规则，点开可看请求与响应的头与文本 body（二进制响应体不落盘），JSON 自动格式化 - 顶部「URL 匹配测试」输入任意地址（可带方法），实时显示命中的规则、重写后的地址、走哪条通道，以及还有哪些规则同样命中、但被它遮蔽 - 把任意一条日志复制为 cURL（按原始请求地址）；支持 HAR 1.2 导出、HAR 导入（由录制流量生成规则，新规则默认停用，确认后自行启用）、cURL 粘贴导入 - 规则可拖拽排序、单条与批量启停/删除，按名称、匹配模式或目标地址搜索，并按状态与匹配类型筛选 - 环境轮换时批量迁移目标域名，并给出逐条变更预览 - 规则列表为空时可直接点快速模板（通配符代理、前缀匹配、鉴权头、改请求头）起步；删除一条规则后能立即撤销，误删不用重填 - 把整套规则保存成命名环境快照，在 FAT / UAT / PROD 间一键切换 - 配置以 JSON 导出；导出默认开启分享模式，剔除 Authorization / Cookie 一类请求与响应头以及 token 类查询参数（取消勾选即原样备份），导入支持覆盖或合并两种模式，同事导入即可复现同一套规则 - 两条通道各自的命中统计：网络层取近 5 分钟的命中记录，后台通道自上次配置变更起累计（内存计数，后台工作线程被回收后从 0 重新开始） 一点说明（不是缺陷）：只重写 URL 的简单规则由浏览器网络层完成，那条请求不经过扩展的脚本，所以请求日志里不会出现它。这类规则可以看弹窗右上格「本页 · 近 5 分钟」的网络层命中数、用「URL 匹配测试」验证，或看规则表里的命中次数；带任何改写、Mock、延迟能力的规则会正常出现在日志里。 改了规则却没生效，按这个顺序检查： 1. 弹窗里的总开关是否开启（关闭时网络层规则也会一起卸载） 2. 这条规则本身是否处于启用状态 3. 页面是否重新加载过——已经发出的请求不会被追溯改写 4. 在「URL 匹配测试」里输入实际请求地址，看是否被一条优先级数字更小（更靠前）的规则遮蔽 5. 使用正则时确保它覆盖整条 URL：网络层会用替换结果整体替换 URL，而后台通道只替换命中的片段，覆盖不全的正则在两条通道上结果不同 关于同源策略：页面只能读取与自己同源（协议、域名、端口三者都相同）的响应，带自定义请求头的调用还要先过一次预检（OPTIONS）。预检或正式响应里缺少允许你来源的 Access-Control-Allow-Origin，请求就到不了业务代码——「Network 里看得到响应、Console 却报错」正是同一件事的两面。这个扩展不改后端，也不假装让校验消失：简单规则改的是请求要去哪个地址，复杂规则改的是这个请求由谁发出。 规则生效了、地址也换过去了，控制台却还是报 CORS——这通常不是没生效：只重写地址的请求在浏览器里仍然受同源策略约束，目标环境没允许你的来源就照样被拦。此时给这条规则加任一改写能力（最省事的是加一个响应头覆盖），它就改由后台通道代发：那一次请求由扩展发出，页面拿到的是扩展构造的响应，页面侧的跨域校验不再适用。「URL 匹配测试」会直接告诉你这条地址现在走的是哪条通道。 与常见方案的差别： - 相比在每个项目里配 devServer 代理：规则配在浏览器里，一次配好对所有项目生效，而且能改写响应，不只是转发 - 相比系统级抓包代理：不需要安装本地证书、不改动系统网络设置、不占用系统代理端口，只作用于浏览器里的页面；公司的 VPN 与抓包工具照常工作，两者可以叠加——改写发生在浏览器侧，抓包工具看到的是改写之后的请求 - 相比改项目配置或构建脚本：它不写任何项目文件、不进任何构建产物，同事不需要在你的仓库里找到那行代理配置，也不会有人把你的本地地址提交上去 - 相比 API 客户端或改请求头插件：它处理页面真实发出的请求，不需要把请求手工搬进另一个工具里重放 - 它的边界也说清楚：这是浏览器内的工具，帮不到服务端对服务端的调用；规则存在你的 Chrome 配置里，需要协作时用 JSON 导出交给同事 它不是什么： - 不是公共 CORS 中转服务：请求只发往你规则里写的那个地址，不经过任何第三方服务器 - 不是 VPN 或系统代理：它不改系统网络设置、不接管其他应用的流量，只管浏览器里你写了规则的那些请求 - 不是抓包调试工具：不安装本地证书、不解析 TLS、不做全流量录制，也不替你保存历史响应 - 不是接口管理平台：Mock 用来顶替还没写好的接口，不承担接口文档、用例管理与团队协作 - 不是服务端网关或反向代理：目标地址由你在浏览器里填，任何配置都不会写进项目文件或基础设施 界面： - 中文 / English 双语界面，6 套主题与浅色 / 深色 / 跟随系统 - 弹窗提供总开关、经扩展请求数（只统计后台通道）、本页近 5 分钟的网络层命中数、自动关闭倒计时、「本页地址命中哪条规则」的预览（浏览器不会应用的网络层规则会标红），以及「为这个页面创建规则」 - 代理自动关闭：30 分钟 / 1 小时 / 2 小时 / 4 小时，基于浏览器定时器，服务工作线程重启后仍然生效 - 快捷键：⌘⇧P（Windows/Linux 为 Ctrl+Shift+P）切换代理；配置页内 N 新建规则、/ 或 ⌘F 聚焦搜索、Esc 关闭弹窗 关于数据： - 规则、日志与偏好全部保存在你本机的浏览器存储中，没有账号、没有统计埋点、不连接任何自有服务器 - 唯一的网络流量就是你自己要求代理的接口流量；导出文件也只写到本地 - 扩展自身零远端依赖：不加载远程脚本、不请求任何远端接口，界面、规则与日志全部从本机读取（你要求代理的那个接口当然仍然需要网络可达） - 关于「更改您访问的网站上的数据」权限：被代理的请求发生在每个开发者自己的内网域名、localhost 与各个测试环境之间，这些地址无法在扩展里预先枚举。扩展用它只做两件事——在你浏览的页面上注入拦截器、按你亲手创建的规则代发请求，不向任何第三方或开发者服务器发送数据 - 关于「携带 Cookie」：默认关闭。某条规则开启后，带出去的是你在该规则指向的那个目标环境已有的会话，请求仍然只发往该地址，不经过第三方或我们的服务器 - 隐私政策：https://liaolongdong.github.io/cross-origin-proxy/privacy.html - 产品说明页：https://liaolongdong.github.io/cross-origin-proxy/ 限制：最多 200 条规则、最近 500 条日志、请求体上限 10MB、延迟 0–60000 毫秒、Mock 与改写的状态码钳制在 200–599（否则前端无法构造有效响应）。需要较新版本的桌面 Google Chrome（Manifest V3）。 问题反馈与源码：https://github.com/liaolongdong/cross-origin-proxy 常见问题： 需要后端配合吗？ 不需要。规则全部在浏览器里生效，不用改后端代码、不用请后端加 CORS 头或重新部署。 规则加了没生效怎么办？ 按这个顺序检查：弹窗总开关是否开启 → 该规则是否启用 → 页面是否重新加载（已发出的请求不会被追溯改写）→ 在「URL 匹配测试」里看是否被更靠前的规则遮蔽 → 正则是否覆盖整条 URL（网络层替换整个 URL，后台通道只替换命中片段，覆盖不全结果不同）。 规则生效了但控制台仍报 CORS？ 只重写地址的请求仍受同源策略约束——目标环境没允许你的来源就照样被拦。给这条规则加任一改写能力（最省事的是加一个响应头覆盖），它就改由后台通道代发，页面侧的跨域校验不再适用。「URL 匹配测试」会告诉你当前走哪条通道。 会跟系统代理或抓包工具冲突吗？ 不会。它只在浏览器内工作，不改系统代理设置，与公司 VPN 和 Charles 等抓包工具可以共存——改写发生在浏览器内部，外部工具看到的是改写后的请求。 支持哪些匹配方式？ 三种：通配符（以 * 结尾）、前缀匹配和正则表达式。通配符和前缀规则由浏览器网络层直接处理，零脚本开销；正则和带改写、Mock、延迟、阻断、重试、请求头覆盖等高级能力的规则由扩展后台代发。 规则有数量限制吗？ 最多 200 条规则、最近 500 条日志、请求体上限 10MB、延迟 0–60000 毫秒、Mock 与改写的状态码钳制在 200–599。 数据会上传到服务器吗？ 不会。规则、日志与偏好全部保存在本机浏览器存储中，没有账号、没有埋点、不连接任何自有服务器，唯一的网络流量就是你自己要求代理的接口请求。 支持哪些浏览器？ 需要较新版本的桌面 Google Chrome（Manifest V3），不支持 Firefox、Safari、Edge 或移动端浏览器。 会影响其他标签页或线上环境吗？ 不会自动影响。只有处于启用状态、且地址匹配上的请求才会被处理；总开关一关，网络层那层规则也一起卸载。不想让代理一直挂着，可以设 30 分钟到 4 小时的自动关闭倒计时。 换电脑，或同事要同一套配置怎么办？ 把配置导出成 JSON（默认开启分享模式，剔掉凭据类请求/响应头与 token 类查询参数），对方导入时可以选择覆盖或合并；整套规则也能存成命名环境快照，在多个环境之间一键切换。规则本身只存在你本机的浏览器存储里，没有云同步。