Loading... # bproxy 跨平台网络代理工具技术分析 # 一、概述 ## 1. 工具简介 bproxy 是一款专为前端开发设计的跨平台网络代理工具。其核心理念是通过 JavaScript 脚本作为配置文件，为开发者提供更高自由度的代理配置能力，解决传统代理工具配置僵化、不支持跨平台协同开发的问题。 ## 2. 核心特点 ### A. JavaScript 脚本配置 配置文件 bproxy.config.js 是一个 Node.js 脚本，开发者可以在配置文件中编写代码实现复杂逻辑，这相比传统的静态配置文件（如 JSON、YAML）提供了更强的表达能力。 ### B. 项目级配置管理 配置文件可以跟随项目走，支持多人跨平台协同开发。团队成员可以共享同一个代理配置，避免因开发环境差异导致的问题。 ### C. 前端开发优化 针对前端开发场景进行了深度优化，支持本地文件映射、YApi Mock 集成、WebSocket 调试等功能。 # 二、系统架构 ## 1. 整体架构 bproxy 采用客户端服务器架构，由以下核心组件构成： ```mermaid graph TB Client[客户端应用] -->|HTTP/HTTPS 请求| Proxy[代理服务器] Proxy -->|匹配规则| RuleEngine[规则引擎] RuleEngine -->|本地文件| FileMapper[文件映射器] RuleEngine -->|本地服务| LocalServer[本地服务器] RuleEngine -->|远程代理| RemoteProxy[远程代理] RuleEngine -->|Mock数据| YApi[YApi集成] Proxy -->|证书处理| HTTPS[HTTPS证书管理] Client -->|WebSocket| WS[WebSocket代理] Proxy -.调试信息.-> DevTools[开发者工具] ```  ## 2. 技术栈 根据项目文件结构分析： | 技术组件 | 说明 | |---------|------| | Electron | 跨平台桌面应用框架 | | Vite | 前端构建工具 | | TypeScript | 类型安全的 JavaScript 超集 | | React | 用户界面框架 | | Node.js | 后端运行时 | | PM2 | 进程管理（ecosystem.config.js） | # 三、核心功能 ## 1. 独立配置管理 配置文件可以跟随项目版本控制，团队成员共享同一套代理规则： ```javascript module.exports = { port: 8888, // 本地代理服务器端口 https: true, // 开启所有 HTTPS 抓包 rules: [ { url: 'https?://m.v.qq.com/tvp/', target: 'hello world', }, ], }; ``` ## 2. 请求响应拦截 ### A. 本地文件映射 将线上资源代理到本地文件或目录，实现本地开发和线上环境的无缝切换： ```javascript // 目录映射 { url: 'https://google.com/static/**', target: '/path/to/your/folder' } // 单文件映射 { url: 'https://google.com/static/a.js', target: '/path/to/your/folder/a.js' } ``` ### B. 本地服务器代理 将线上请求代理到本地开发服务器： ```javascript { url: 'https://baidu.com/pages/demo', target: 'http://127.0.0.1:3000' } ``` ### C. 自定义响应头 解决跨域问题和调试需求： ```javascript { url: 'https://google.com/user', responseHeaders: { "Access-Control-Allow-Origin": "https://qq.com", "Access-Control-Allow-Credentials": "true", }, requestHeaders: { "cache-control": "no-store", }, } ``` ## 3. HOST 配置增强 传统 HOST 配置只能将整个域名指向同一个 IP，bproxy 支持同一域名下不同路径配置不同的 HOST： ```javascript // 同一个域名下，不同的接口可以配置不同的 host { url: 'https://google.com/api/user', target: '127.0.0.1' } { url: 'https://google.com/api/login', target: '192.168.0.1' } ``` ## 4. HTTPS 支持 ### A. 自动证书安装 bproxy 支持自动安装 HTTPS 证书，简化 HTTPS 抓包配置流程。 ### B. HTTPS 白名单 可以自定义需要抓包的 HTTPS 白名单，避免抓取所有 HTTPS 流量： ```javascript { https: true, // 开启 HTTPS 抓包 // httpsWhitelist: ['*.example.com'] // 配置白名单（示例） } ``` ## 5. WebSocket 代理 支持 WebSocket 协议代理，配合本地代码修改实现自动刷新： ```mermaid sequenceDiagram participant Browser as 浏览器 participant BProxy as bproxy participant DevServer as 本地开发服务器 Browser->>BProxy: WebSocket 连接 BProxy->>DevServer: 转发连接 DevServer-->>BProxy: 文件变化通知 BProxy-->>Browser: 触发自动刷新 ```  ## 6. YApi 集成 支持配置 YApi 项目 ID，自动将请求代理到 YApi 的 Mock 数据： ```javascript { yapi: { projectId: '123', // YApi 项目 ID // 其他 YApi 配置 } } ``` ## 7. 弱网模拟 支持自定义延时配置，模拟弱网环境测试应用性能： ```javascript { url: 'https://google.com/user', delay: 2000 } // 延迟 2000ms 返回 ``` ## 8. 远程调试 集成 Chrome 开发者工具，支持远程调试功能： ```javascript { url: 'http://m.v.qq.com/tvp', debug: true } ``` ## 9. 请求异常模拟 可以模拟各种 HTTP 状态码，测试应用的异常处理逻辑： ```javascript { url: 'https://google.com/user', target: 502 } // 返回 502 状态码 ``` ## 10. 草稿功能 快速修改 JSON 响应数据： ```javascript { url: '/api/json', target: function draft(data) { data.error = 1001; } } ``` # 四、工作原理 ## 1. 请求处理流程 ```mermaid flowchart TD Start[客户端发起请求] --> Intercept[bproxy拦截请求] Intercept --> Match{匹配规则} Match -->|文件映射| File[返回本地文件] Match -->|本地服务| Local[转发到本地服务器] Match -->|远程代理| Proxy[转发到远程服务器] Match -->|Mock数据| Mock[返回Mock数据] Match -->|默认行为| Default[正常转发请求] File --> Response[返回响应] Local --> Response Proxy --> Response Mock --> Response Default --> Response Response --> End[客户端接收响应] ```  ## 2. 规则匹配引擎 bproxy 使用 URL 模式匹配引擎，支持通配符和正则表达式： - 通配符匹配：`https://example.com/api/**` - 正则表达式：支持完整的 JavaScript 正则语法 - 优先级：按配置顺序匹配，先匹配先执行 ## 3. HTTPS 中间人攻击 bproxy 使用 HTTPS 中间人攻击技术实现 HTTPS 抓包： ```mermaid sequenceDiagram participant Client as 客户端 participant BProxy as bproxy participant Server as 目标服务器 Client->>BProxy: HTTPS请求（连接bproxy证书） BProxy->>Server: 建立真实HTTPS连接 Server-->>BProxy: 返回真实证书 BProxy-->>Client: 返回bproxy伪造证书 Client->>BProxy: 发送加密数据（用bproxy公钥加密） BProxy->>Server: 转发数据（用服务器公钥加密） Server-->>BProxy: 返回响应 BProxy-->>Client: 返回响应 ```  # 五、安装与部署 ## 1. 命令行工具安装 ```bash # 全局安装 npm i bproxy -g # 升级到最新版本 npm i bproxy@latest -g ``` ## 2. 桌面应用 支持 Windows 和 macOS 平台： - 下载地址：https://www.duelpeak.com/pages/bproxy - 官网文档：https://www.hahahehe.cn/pages/bproxy - 工具箱：https://www.hahahehe.cn/tools/ ## 3. 项目配置 在项目根目录创建 bproxy.config.js 文件： ```javascript module.exports = { port: 8888, https: true, rules: [ // 配置代理规则 ], }; ``` # 六、技术优势分析 ## 1. 与传统代理工具对比 | 特性 | bproxy | Charles | Fiddler | |------|--------|---------|---------| | 配置方式 | JavaScript脚本 | GUI界面 | GUI界面 | | 跨平台协同 | 支持（配置可版本控制） | 不支持 | 不支持 | | 编程能力 | 强（完整Node.js） | 弱（仅脚本） | 中（脚本扩展） | | 前端优化 | 深度集成 | 通用 | 通用 | | 学习成本 | 中等（需JavaScript） | 低 | 低 | ## 2. 适用场景 ### A. 团队协作开发 配置文件可以提交到 Git 仓库，团队成员共享同一套代理规则，减少环境差异导致的问题。 ### B. 复杂业务逻辑测试 通过 JavaScript 脚本可以实现复杂的响应处理逻辑，如动态修改数据、模拟各种状态等。 ### C. 前后端联调 前后端开发者可以使用同一份配置文件，后端开发者提供接口地址，前端开发者配置本地映射。 ### D. 接口Mock集成 与 YApi 等 Mock 平台集成，自动将请求代理到 Mock 数据。 # 七、技术实现细节 ## 1. 代理服务器实现 bproxy 基于 Node.js 的 http/https 模块实现代理服务器： - 监听本地端口（默认 8888） - 接收客户端请求 - 根据规则引擎匹配处理策略 - 转发或修改请求响应 ## 2. 证书管理 - 自动生成根证书 - 动态生成目标域名证书 - 支持证书安装和信任 ## 3. 规则引擎 规则引擎是 bproxy 的核心，负责： - URL 模式匹配 - 规则优先级排序 - 目标解析和执行 - 响应内容处理 ## 4. 文件监听 监听本地文件变化，触发 WebSocket 自动刷新： - 使用 Node.js fs.watch API - 检测文件修改事件 - 通过 WebSocket 推送刷新指令 # 八、项目现状 ## 1. 开发状态 根据 GitHub 仓库信息： - 最后更新：2024 年 5 月 28 日 - 提交次数：336 次 - 贡献者：2 人 - Star 数：277 - Fork 数：13 ## 2. 技术债务 从代码提交记录看： - 最近一次功能更新是 2024 年 9 月 - 项目活跃度有所下降 - 部分依赖可能需要更新 # 九、总结与展望 ## 1. 技术价值 bproxy 通过 JavaScript 脚本配置的创新设计，解决了传统代理工具在团队协作和复杂场景下的痛点。其核心理念值得借鉴： - 配置即代码 - 项目级配置管理 - 针对特定场景深度优化 ## 2. 适用人群 - 前端开发者 - 需要团队协作的开发团队 - 需要复杂代理配置的场景 ## 3. 未来展望 随着前端开发复杂度的提升，类似的开发工具会越来越重要。bproxy 的设计理念代表了开发者工具的一个发展方向：更灵活、更协作、更贴近开发场景。 *** ## 参考资料 1. [bproxy GitHub 仓库](https://github.com/zobor/bproxy) 2. [bproxy 官方文档](https://www.hahahehe.cn/pages/bproxy) 3. [bproxy 桌面应用下载](https://www.duelpeak.com/pages/bproxy) 最后修改：2026 年 01 月 22 日 © 允许规范转载 赞 如果觉得我的文章对你有用，请随意赞赏