Media
5 items
Description
前端跨域联调不用改代码，也不用请后端改 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），替换请求体 - 响应改写：替换响应状态码、响应头，或按路径替换 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），不给页面增加脚本开销；关闭总开关时这层规则一并卸载，不会留下隐形重定向 典型配置（示例域名换成你自己的）： - 跨环境转发：匹配 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 导出；导入支持覆盖或合并两种模式，同事导入即可复现同一套规则 - 两条通道各自的命中统计：网络层取近 5 分钟的命中记录，后台通道自上次配置变更起累计（内存计数，后台工作线程被回收后从 0 重新开始） 一点说明（不是缺陷）：只重写 URL 的简单规则由浏览器网络层完成，那条请求不经过扩展的脚本，所以请求日志里不会出现它。这类规则请用「URL 匹配测试」验证，或看规则表里的命中次数；带任何改写、Mock、延迟能力的规则会正常出现在日志里。 改了规则却没生效，按这个顺序检查： 1. 弹窗里的总开关是否开启（关闭时网络层规则也会一起卸载） 2. 这条规则本身是否处于启用状态 3. 页面是否重新加载过——已经发出的请求不会被追溯改写 4. 在「URL 匹配测试」里输入实际请求地址，看是否被一条优先级数字更小（更靠前）的规则遮蔽 5. 使用正则时确保它覆盖整条 URL：网络层会用替换结果整体替换 URL，而后台通道只替换命中的片段，覆盖不全的正则在两条通道上结果不同 规则生效了、地址也换过去了，控制台却还是报 CORS——这通常不是没生效：只重写地址的请求在浏览器里仍然受同源策略约束，目标环境没允许你的来源就照样被拦。此时给这条规则加任一改写能力（最省事的是加一个响应头覆盖），它就改由后台通道代发：那一次请求由扩展发出，页面拿到的是扩展构造的响应，页面侧的跨域校验不再适用。「URL 匹配测试」会直接告诉你这条地址现在走的是哪条通道。 与常见方案的差别： - 相比在每个项目里配 devServer 代理：规则配在浏览器里，一次配好对所有项目生效，而且能改写响应，不只是转发 - 相比系统级抓包代理：不需要安装本地证书、不改动系统网络设置、不占用系统代理端口，只作用于浏览器里的页面；公司的 VPN 与抓包工具照常工作，两者可以叠加——改写发生在浏览器侧，抓包工具看到的是改写之后的请求 - 相比改项目配置或构建脚本：它不写任何项目文件、不进任何构建产物，同事不需要在你的仓库里找到那行代理配置，也不会有人把你的本地地址提交上去 - 相比 API 客户端或改请求头插件：它处理页面真实发出的请求，不需要把请求手工搬进另一个工具里重放 - 它的边界也说清楚：这是浏览器内的工具，帮不到服务端对服务端的调用；规则存在你的 Chrome 配置里，需要协作时用 JSON 导出交给同事 界面： - 中文 / English 双语界面，6 套主题与浅色 / 深色 / 跟随系统 - 弹窗提供总开关、今日请求数（只统计后台通道）、自动关闭倒计时、「当前页面命中哪条规则」的预览，以及「为这个页面创建规则」 - 代理自动关闭：30 分钟 / 1 小时 / 2 小时 / 4 小时，基于浏览器定时器，服务工作线程重启后仍然生效 - 快捷键：⌘⇧P（Windows/Linux 为 Ctrl+Shift+P）切换代理；配置页内 N 新建规则、/ 或 ⌘F 聚焦搜索、Esc 关闭弹窗 关于数据： - 规则、日志与偏好全部保存在你本机的浏览器存储中，没有账号、没有统计埋点、不连接任何自有服务器 - 唯一的网络流量就是你自己要求代理的接口流量；导出文件也只写到本地 - 扩展自身零远端依赖：不加载远程脚本、不请求任何远端接口，界面、规则与日志全部从本机读取（你要求代理的那个接口当然仍然需要网络可达） - 关于「更改您访问的网站上的数据」权限：被代理的请求发生在每个开发者自己的内网域名、localhost 与各个测试环境之间，这些地址无法在扩展里预先枚举。扩展用它只做两件事——在你浏览的页面上注入拦截器、按你亲手创建的规则代发请求，不向任何第三方或开发者服务器发送数据 - 隐私政策：https://liaolongdong.github.io/cross-origin-proxy/privacy.html 限制：最多 200 条规则、最近 500 条日志、请求体上限 10MB、延迟 0–60000 毫秒、Mock 与改写的状态码钳制在 200–599（否则前端无法构造有效响应）。需要较新版本的桌面 Google Chrome（Manifest V3）。 问题反馈与源码：https://github.com/liaolongdong/cross-origin-proxy