浏览器请求控制实操指南Header Editor 从装到用三步学会修改请求头与响应头【免费下载链接】HeaderEditorManage browsers requests, include modify the request headers, response headers, response body, redirect requests, cancel requests项目地址: https://gitcode.com/gh_mirrors/he/HeaderEditor周五深夜前端工程师阿哲第 9 次打开浏览器开发者工具手动替换Authorization请求头的值只想摔键盘。这种每次联调都要手工改请求头的体验正是 Header Editor 要终结的这款开源的浏览器扩展能替你修改请求头、响应头、响应体还能重定向甚至取消请求把重复劳动压缩成一条规则。联调三套环境每套的 token、域名前缀都不一样测一个跨域接口要在控制台里来回试 CORS 头想看某个页面在手机上的表现得先折腾半天 UA。这些场景你有没有经历过如果有这篇指南就是为你写的——不聊复杂原理只讲装上之后怎么用让你在十分钟内跑通第一条属于自己的规则。一个加班的深夜手动改请求头有多崩溃阿哲那晚的任务其实很简单本地跑着开发服务要调线上环境的接口。步骤是固定的——复制请求 → 找Authorization→ 粘贴新 token → 刷新页面 → 看结果。听起来一分钟能搞定实际上一晚上他重复了十几次改完 A 接口忘了 B 接口token 粘错位置报 401跨域接口被浏览器拦在半路还有一次因为忘了刷新对着旧数据排查了二十分钟。手动改请求头的问题不只是麻烦而是容易出错、不可复现、浪费时间。你在地址栏里做的每一次临时修改都不会被记下来刷新之后一切归零。而一个浏览器请求控制工具解决的就是这件事让请求在发出之前、响应在送达之前都先经过一道可编程的闸机。你想加什么头、删什么头、把请求指向哪里写进规则里从此一劳永逸。Header Editor 是什么一句话讲清Header Editor是一款管理浏览器网络请求的开源扩展可以修改请求头、响应头、响应体支持请求重定向和取消请求。它本身不做任何事只负责把你编写的规则应用到符合条件的请求上。它适合三类人开发者切换环境、调试接口、解决跨域告别复制粘贴。测试人员模拟各种网络场景、验证异常响应不用再改代码。普通用户绕过网站限制、拦截广告跟踪、反防盗链还网页一个清净。三步跑通你的第一条规则安装之后最快 3 分钟就能看到效果。以给开发环境的 API 自动加上认证头为例第 1 步安装扩展。Chrome、Edge、Firefox 的扩展商店里搜索Header Editor即可。注意区分完整版一般标注为 v2和轻量版v3后面会讲怎么选。第 2 步新建规则。点击工具栏图标打开管理页点右下角的新建规则依次填三块内容规则名称开发环境自动认证 匹配条件网址前缀 → http://localhost:3000/api/ 执行动作修改请求头添加 Authorization: Bearer dev-token-123第 3 步保存并启用。保存后规则立即生效不用重启浏览器。刷新页面打开开发者工具确认——Authorization已经自动出现在请求里了。从此所有以http://localhost:3000/api/开头的请求都会自动带上这个头。你不再需要手动粘贴任何东西。装上之后它能替你做什么与其按功能模块介绍不如换个问法它能替你做什么答案是四件实事。请求出门前给请求头贴标签、撕标签、换标签这是它最常用的能力把请求头当成一张标签操作做法典型场景添加头执行动作选修改请求头填入名称和值自动加认证 token、加缓存协商头修改头同名覆盖即可换User-Agent伪装设备删除头把头的值设为_header_editor_remove_去掉跟踪用的 Cookie、Referer条件化不同匹配条件配不同规则开发环境用测试 token线上用正式 token小提示从 4.0.0 起头名称会自动转为小写这是符合 HTTP 规范的不影响功能。响应进门时给响应把关改签请求出去之后回来的响应同样归你管修改响应头比如给本地联调加 CORS 头让跨域请求畅通无阻。修改响应体动态改写页面返回的内容适合测试和调试注意该功能会占用一定资源可能影响下载按需开启。重定向请求把请求转到另一个地址比如换 CDN 镜像、HTTP 强制跳 HTTPS。取消请求直接掐掉不想要的请求比如广告脚本和统计代码。精确点名六种匹配维度规则靠匹配条件找到目标请求支持六种维度可多选叠加多个条件需同时满足匹配维度匹配对象举例全部所有 URL全局加安全头正则表达式支持 JS 正则可用$1占位符\.(css\|js)(\?\|$)网址前缀含协议的网址开头http://localhost:3000/api/域名含子域名的完整域名api.example.com完整网址含查询参数的整条地址精确到某个接口请求方法GET / POST 等只处理 POST资源类型网页、图片、脚本等只处理图片请求另外还有排除规则只要命中任意排除条件规则就不生效用来做除了……以外的精细控制。规则多了不乱分组与优先级规则可以按项目、按环境、按功能分组管理就像给文件建文件夹。每条规则还能设置优先级高优先级的规则先执行常用于把安全类规则排在前面、把兜底规则放在最后。两个版本怎么选维度完整版轻量版运行模式Web RequestDNRdeclarativeNetRequest自定义函数✅ 支持❌ 不支持正则排除规则✅ 支持❌ 不支持性能开销略高更省适合人群开发者、进阶用户普通用户、追求性能者普通用户从轻量版开始完全够用需要写自定义逻辑、做复杂调试的选完整版。三个角色的实战案例复制即用开发者切换环境不再手忙脚乱痛点本地开发要连测试环境每次都要手动换 token 和域名。解法一条规则搞定自动认证见上文再补一条跨域放行规则名称本地联调跨域放行 匹配条件资源类型 → xmlhttprequest 执行动作修改响应头添加 Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET, POST, PUT, DELETE额外福利想验证接口报错时的前端表现用重定向请求把接口指到本地 mock 服务前端代码一行都不用动。测试人员用规则模拟极端场景痛点要验证缓存策略、要模拟不同设备改代码代价太大。解法模拟静态资源缓存一年规则名称静态资源长缓存 匹配条件网址正则 → \.(css|js|png|jpg|svg)(\?|$) 执行动作修改响应头添加 Cache-Control: public, max-age31536000再模拟手机端访问规则名称伪装 iPhone 访问 匹配条件域名 → m.example.com 执行动作修改请求头 User-Agent → Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1普通用户绕过限制、拦截广告、防盗链痛点有些网站只能手机访问、有些图片带防盗链、有些页面塞满了跟踪脚本。解法把上面的伪装 iPhone规则里的匹配条件换成目标网站的域名即可。拦截统计脚本规则名称拦截跟踪脚本 匹配条件网址正则 → (metrics|analytics|stats)\.\w\.com 执行动作取消请求反防盗链看不了图时把Referer改成图库允许的来源规则名称反防盗链 匹配条件网址前缀 → http://imgsrc.baidu.com/ 执行动作修改请求头 Referer → http://tieba.baidu.com进阶玩法让规则学会思考当规则之间需要联动、或者要按运行时的实际情况做决定时就该请出自定义函数了完整版专属。自定义函数可以在重定向请求修改请求头修改响应头修改响应体中使用。它接收两个参数val当前值可能是 URL、头数组或响应文本和detail请求的详细信息包括method、type、tab等。比如动态生成带时间戳的 tokenif (val[0] val[0].name Authorization) { val[0].value Bearer Date.now(); }又比如按请求类型决定是否重定向if (detail.type media) { return val.replace(example.com, example.org); }返回特殊值还能触发隐藏技能头内容返回_header_editor_remove_→删除该头3.0.5 起重定向函数返回_header_editor_cancel_→取消该请求4.0.3 起写函数时记得能用普通规则解决的优先用普通规则自定义函数只在必要时出手。调试函数请在后台页面的控制台查看Chrome 在扩展页开启开发者模式后点检查视图Firefox 用about:debugging。至于规则备份与团队协作管理页内置导入/导出功能换电脑一键恢复、拉同事入伙一键分享比截图存文档靠谱得多。规则不生效按这份清单排查Q1规则写了但请求没变化按顺序排查① 确认规则开关是启用状态② 匹配条件是否写对前缀是否带了http://③ 是否被排除规则命中④ 是否被更高优先级的规则抢先处理⑤ 刷新页面再看部分修改对已加载页面不生效⑥ 隐私/隐身模式下扩展可能默认不工作需在扩展设置里放开权限。Q2改了响应头开发者工具里看不到别慌开发者工具里的响应头显示不一定准确。比如把content-type改成text/plain页面确实变成了纯文本但面板里可能仍显示text/html。以实际页面效果为准。Q3为什么头名称全变小写了4.0.0 起按 RFC 规范统一处理字段名大小写不敏感功能不受影响。Q4想删掉一个头删不掉把它的值设置为_header_editor_remove_。Q5Chrome 提示Header Editor 已开始调试此浏览器这是修改响应体功能调用了 Chrome 的 debugger API属正常现象。不想看到提示可以在选项中关闭该功能或给 Chrome 加--silent-debugger-extension-api启动参数。Q6轻量版做不了的事一定得上完整版先看需求不写自定义函数、不依赖正则排除轻量版足够反之选完整版。两条路都可以随时切换规则集。想自己动手改本地开发与源码入口Header Editor 是开源项目代码完全公开欢迎贡献。本地跑起来只需几步git clone https://gitcode.com/gh_mirrors/he/HeaderEditor pnpm i --frozen-lockfile npm run start按目标平台和版本构建目标命令Chrome 完整版npm run build:chrome_v2Chrome 轻量版npm run build:chrome_v3Firefox 完整版npm run build:firefox_v2Firefox 轻量版npm run build:firefox_v3想研究请求是怎么被拦截、改写、放行的核心逻辑都在src/pages/background/request-handler/目录下dnr-handler.ts对应轻量版的 DNR 模式web-request-handler.ts对应完整版的 Web Request 模式chrome-response-modifier.ts负责响应体修改。端到端测试在tests/e2e/改完代码记得跑一遍再提 Pull Request。最后为什么值得现在就装用一张清单收个尾✅开箱即用三步创建规则改完即生效不用重启浏览器。✅能力完整请求头、响应头、响应体、重定向、取消请求一个不少。✅匹配精准正则、前缀、域名、方法、资源类型六维定位还能排除。✅管理省心分组、优先级、导入导出规则再多也不乱。✅隐私友好免费、无广告、所有规则存在本地、源码开源可审查。✅多浏览器Chrome、Edge、Firefox 全覆盖完整版/轻量版任选。下次再遇到手动改请求头的瞬间先停下来想一想这件事值不值得写成一条规则。装上 Header Editor把第一次手动操作变成最后一次然后你就会发现——那个熟悉的加班的深夜已经很久没出现了。【免费下载链接】HeaderEditorManage browsers requests, include modify the request headers, response headers, response body, redirect requests, cancel requests项目地址: https://gitcode.com/gh_mirrors/he/HeaderEditor创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考