摘要： 当测试环境挂了，你是选择刷手机等待修复，还是搭建复杂的 Mock 服务？本文将介绍一款我开发的 Chrome 插件，它能像“魔法”一样，让你在不修改代码、不重新构建的情况下，将前端页面的请求瞬间转发到任意环境（如生产环境），构建一条高效的开发“逃生通道”。
🚨 痛点：当测试环境挂了
作为一名前端开发者，你是否经历过这样的绝望时刻？
- 场景 A：你正在全神贯注地开发新功能，突然测试环境的后端接口报错 500。你只能无奈地等待后端同事修复，宝贵的时间在等待中流逝。
- 场景 B：你需要验证一个线上问题，但本地环境无法复现，必须依赖测试环境。然而测试环境的数据结构与线上不一致，导致你无法准确调试。
单个接口 Mock 很容易，但如果整个环境都崩了，或者你需要整体迁移请求，传统的 Mock 方案（如拦截单个 URL）就显得力不从心了。
🚀 解决方案：API 代理转发工具
为了解决这个问题，我开发了一款名为 API Proxy 的 Chrome 插件。
它的核心理念非常简单粗暴：我不改代码，我只改流量。
这款插件允许你拦截网页发出的所有 API 请求，并根据正则表达式规则，将它们转发到另一个服务器。你可以把它理解为浏览器端的“Nginx 反向代理”，但它更轻量、更灵活，且无需重启服务，刷新页面即可生效。
💡 核心功能
这款插件不仅仅是一个简单的 URL 替换工具，它具备以下强大的功能：
- 多规则转发：支持配置多个转发规则，每个规则独立开关，互不干扰。
- 正则表达式匹配：使用正则表达式匹配源 URL，并支持在目标 URL 中使用
$1,$2等捕获组，实现复杂的路由映射。 - 自动 Cookie 管理：这是最核心的难点。插件能自动获取目标服务器的 Cookie（例如生产环境的登录态），并注入到转发请求中，解决跨域认证问题。
- 自定义 Headers：支持添加任意 HTTP Headers，满足鉴权或调试需求。
- 完整的日志系统：所有被拦截和转发的请求都会记录在案，支持搜索和导出，方便排查问题。
🛠️ 技术架构与实现原理
这款插件基于 Chrome Manifest V3 开发，为了实现对 fetch 和 XHR 请求的拦截，我们采用了经典的“内容脚本注入”方案。
1. 数据流架构
整个插件的数据流向如下：
2. 核心拦截技术
为了不破坏页面原有的逻辑，我们需要在页面加载的第一时间注入脚本。核心代码逻辑如下（简化版）：
// injected.js
// 重写 window.fetch 和 XMLHttpRequest.prototype.send
// 在请求发出前，通过 chrome.runtime.sendMessage 询问 background 是否需要转发
// 如果需要，取消原生请求，改由 background 发起代理请求
3. Cookie 跨域难题
由于浏览器的安全策略，测试环境（test.example.com）无法直接读取生产环境（prod.example.com）的 Cookie。
解决方案：
利用 Chrome 插件的 chrome.cookies 权限。插件后台（Service Worker）拥有跨域读取 Cookie 的权限。当规则配置为“自动获取 Cookie”时，插件会从目标域名读取 Cookie，并将其作为请求头附加到代理请求中。
🚀 快速上手指南
1. 安装
前往 chrome://extensions/，开启开发者模式，加载已解压的扩展程序，选择插件目录即可。
2. 配置你的第一条规则
假设你的测试环境崩溃了，你想把请求全部打到生产环境：
- 规则名称：测试 -> 生产
- 源 URL 模式：
https://test.example.com/(.*) - 目标 URL：
https://prod.example.com/$1 - Cookie 设置：开启“自动获取 Cookie”
保存并刷新页面，见证奇迹的时刻：你的前端页面现在正在使用生产环境的数据跑起来了！
📊 功能截图
📝 结语
API Proxy 插件虽然小巧，但它在关键时刻能极大地提升开发效率。它不仅解决了“环境挂了”的问题，还适用于本地开发调试线上数据、跨域请求代理等多种场景。
注意：请仅在开发和测试环境中使用此工具。由于它涉及 Cookie 和数据转发，请勿用于非法或未经授权的用途。
GitCode 地址：gitcode.com/liuguolin/D…
如果你觉得这个工具对你有帮助，欢迎 Star 支持！也欢迎提交 Issue 或 PR 帮助我们完善它。
