浏览器请求头编辑实战：把半小时的手动调试压缩成一条规则

浏览器请求头编辑实战把半小时的手动调试压缩成一条规则【免费下载链接】HeaderEditorManage browsers requests, include modify the request headers, response headers, response body, redirect requests, cancel requests项目地址: https://gitcode.com/gh_mirrors/he/HeaderEditor又是 401。这已经是我今天第五次因为缺一个认证头而卡壳。在开发者工具里反复复制粘贴 Token、手动切换环境、被跨域问题折腾到怀疑人生——直到装上 Header Editor 这个开源扩展我才明白浏览器请求头编辑这件事完全可以交给规则自动完成。如果你也每天在接口文档和浏览器控制台之间来回横跳这篇实战笔记应该能帮你在十分钟内摆脱重复劳动。放心全程不需要改一行业务代码。先认识这位请求管家Header Editor 是一个开源免费的浏览器扩展一句话就能说清它的全部能力修改请求头、修改响应头、修改响应体、重定向请求、取消请求。有意思的是它本身什么功能都没有。这话听起来奇怪但它的设计逻辑很像一把钥匙柜Header Editor 只提供编写和管理规则的能力至于你要它做什么全看你写了什么规则。这样设计的好处很实在——规则本质是文本可以复制、分享、备份换台电脑也不用从零开始。你写的每一条规则其实都在回答两个问题管哪些请求以及怎么管我更爱把它想象成住在浏览器里的安检员每个请求进出都得过一遍他的检查清单清单上写什么他就执行什么。装哪个版本先看这张表动手之前搞清楚一件事Header Editor 分精简版和完整版别下错了。版本运行模式自定义函数排除正则适合谁精简版Lite仅 DNR不支持不支持追求性能的普通用户完整版FullWeb RequestFirefox 下额外支持 DNR支持支持开发者、进阶玩家DNRdeclarativeNetRequest是浏览器提供的一种声明式规则引擎性能更好、更省资源Web Request 模式则功能更全面代价是性能稍逊。简单说没有特殊需求直接用精简版。哪天发现某个功能用不了官方文档里有完整的版本对比表见docs/docs/zh-CN/guide/index.md对照着看就行。五步写出人生第一条规则装好后点浏览器右上角的 HE 图标管理面板就出现了。右下角那个加号按钮是之后所有故事共同的起点。以给本地开发环境的接口自动加认证头为例这条规则只需五步点加号新建规则起个名字比如本地 API 自动认证匹配类型选网址前缀填http://localhost:3000/api/功能类型选修改请求头头名称填Authorization头内容填Bearer dev-secret-123保存并确认规则开关处于打开状态。就这么简单。从此所有以http://localhost:3000/api/开头的请求都会自动带上认证头你不再需要每次打开 Postman 复制粘贴也不用在代码里埋一个测试专用的硬编码 Token。记住这个万能公式匹配条件 执行动作。后面所有高阶玩法都是它的变体。匹配条件给请求写一张收货地址规则要精准生效匹配条件必须写对。Header Editor 一共提供六种匹配方式全部匹配所有 URL适合全局规则正则表达式最灵活的匹配方式还支持$1这类占位符网址前缀包含https://在内的前缀日常最常用域名包含子域名的完整域名网址含?及之后所有参数在内的完整地址请求方法 / 资源类型GET、POST或者图片、脚本、XHR 等类型。勾选多个条件时必须同时满足才算命中。这就像快递单上的收货地址省市区层层嵌套任何一级对不上包裹就到不了你手里。正则匹配还能把捕获的内容搬运到新地址。比如把京东的 HTTP 请求全部升级成 HTTPS匹配http://(sale|item|www).jd.com 动作重定向至 https://$1.jd.com这里的$1会自动取到括号里匹配到的内容一条规则就把所有子域名的跳转都覆盖了。另外还有一类排除规则哪怕请求满足全部匹配条件只要踩中任何一条排除条件规则立即失效。除了登录页全都生效这种需求就是它的主场。小提醒精简版在排除条件里不支持正则表达式配置的时候别踩坑。四种动作对应四种管法规则可执行的动作有四种分别作用于请求的不同阶段动作作用典型场景修改请求头改写发出去的请求换 User-Agent、加 Token修改响应头改写返回来的响应加 CORS 头、缓存头重定向请求把请求引向别处换镜像源、强制 HTTPS取消请求直接拦下这个请求屏蔽广告和跟踪脚本举个改响应头的例子本地调试时前端被跨域卡住与其去麻烦后端同事改配置不如自己加一条规则匹配资源类型为 xmlhttprequest 动作添加响应头 Access-Control-Allow-Origin: *三秒搞定前端照常请求后端一行代码都不用动。同一种手法还能做静态资源长期缓存Cache-Control: public, max-age31536000、给全站补安全头X-Frame-Options: DENY操作套路完全一致。两个藏在细节里的小暗号用久了你会发现官方文档里写着两个特殊值我管它们叫暗号。第一个暗号是_header_editor_remove_。把某个请求头或响应头的值设成这串字符就能直接删除这个头。想干掉网页里的跟踪 Cookie一条规则的事。第二个暗号是_header_editor_cancel_。在重定向功能里返回这串字符就能取消整个请求。比如拦掉所有带utm_source参数的追踪链接if (val.includes(utm_source)) { return _header_editor_cancel_; }完整版专属规则写不出的逻辑交给自定义函数普通规则是填空题自定义函数则是问答题。完整版支持用 JavaScript 写一段逻辑动态决定请求的去向或头的内容。它只出现在三种场景重定向、修改请求头、修改响应头。函数接收两个参数val当前值和detail请求详情。注意你只需写函数主体不用管外层包裹。比如给 User-Agent 追加一个版本号for (const a in val) { if (val[a].name.toLowerCase() user-agent) { val[a].value HE/2.0.0; break; } }detail对象里藏着请求的各种情报请求方法、资源类型、发起页面、时间戳、代理信息Firefox 下还能拿到隐私模式的标记。比如只把 example.com 下的媒体文件重定向到 example.org正则很难写函数一句话if (detail.type media) { return val.replace(example.com, example.org); }想调试自定义函数直接打开扩展的后台页面Chrome 在chrome://extensions/的检查视图里Firefox 在about:debugging里控制台输出全都在那。详细的函数说明可以看官方文档docs/docs/zh-CN/guide/custom-function.md。规则攒多了分组、备份、同步一条龙规则攒到几十条后管理就成了新问题。Header Editor 支持按组归类——认证组缓存组调试组按项目分、按功能分都行。我的习惯是把临时调试用的规则单独放一组用完整组一键禁用清爽又不误伤。迁移和备份也有完整方案导入导出规则本质是 JSON 文件随时导出留档换电脑一键恢复团队协作也能靠它共享配置云同步自 4.0.5 起支持基于浏览器自带的同步机制Firefox Sync / Chrome Sync数据存在浏览器厂商的服务器上不经过第三方隐私有保障。注意同步容量大约只有 100KB规则特别多时可能上传失败这时候老老实实走导入导出第三方规则官方文档里整理了一些社区维护的规则包比如 Google 资源重定向下载导入即可用适合不想从零写的人。避坑指南我替你踩过的五个坑与其看干巴巴的 FAQ不如看看我实际踩过的坑能帮你省不少排查时间。坑一改完响应头开发者工具里却没变化这是假象。Chrome 和 Firefox 的开发者工具都不会显示扩展修改后的响应头请以实际效果为准。把content-type改成text/plain页面真的会变成纯文本但工具里可能仍显示text/html。坑二头名称怎么全变小写了这是 4.0.0 之后的正常行为。HTTP 规范RFC 2616规定头名称不区分大小写扩展索性统一转成小写符合规范不用慌。坑三头内容留空两个浏览器行为不一样Chrome 会保留一个空头Firefox 则会直接移除。想让两边行为一致请使用删除暗号_header_editor_remove_。坑四某些地址死活改不动Chrome 及同类浏览器不允许扩展修改chrome.google.com/webstore开头的请求这是浏览器的硬性限制规则写得再对也没用。坑五启用修改响应体后Chrome 弹了个调试提示别慌这是正常的。修改响应体在 Chrome 上依赖 debugger API所以会提示已开始调试此浏览器。不想看到它可以在选项里关掉该功能或给 Chrome 加--silent-debugger-extension-api参数启动。规则不生效时按这个顺序排查先看规则开关有没有开再看匹配条件是否过宽或过窄用网络面板确认请求真的走了最后检查是不是被排除规则拦了。免费、开源、无追踪还能自己动手改最后说点让人安心的事Header Editor 完全免费、无广告、不上传任何用户数据所有规则都保存在本地浏览器里。作为开源项目GPL 协议它的代码完全公开、接受社区审查——对在意隐私的人来说这一点比功能本身更重要。想自己构建或贡献代码几步就好git clone https://gitcode.com/gh_mirrors/he/HeaderEditor pnpm i --frozen-lockfile npm run build:chrome_v2 # Chrome 完整版 npm run build:chrome_v3 # Chrome 精简版 npm run build:firefox_v2 # Firefox 完整版 npm run build:firefox_v3 # Firefox 精简版对技术实现感兴趣的话请求处理的核心代码在src/pages/background/request-handler/目录规则、自定义函数、修改响应体的完整文档则在docs/docs/zh-CN/guide/下都值得翻一翻。写在最后回头看那位折磨了我一下午的401 之敌其实只花十分钟就被一条规则彻底消灭了。从那以后浏览器请求头编辑这件事对我来说就浓缩成了三个字写规则。如果你也每天在开发者工具和接口文档之间来回切换不妨花五分钟装上 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），仅供参考