请求头修改实战：Header Editor 让浏览器网络请求控制不再靠运气

请求头修改实战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早上九点半我的接口联调又卡住了。前端页面在http://localhost:3000后端接口在http://api.example.com浏览器拦下所有跨域请求报错信息红彤彤地铺满控制台。更麻烦的是本地环境需要带一个特殊的X-Dev-Token每次都要打开开发者工具手动加上刷新一次加一次烦到怀疑人生。那天下午我找到了 Header Editor——一个专门做浏览器请求控制的扩展。它做的事情可以概括成一句话管理浏览器发出的每一个请求包括修改请求头、修改响应头、修改响应体、重定向请求、取消请求。这篇文章就是我花了一整天从安装到上手的过程里面踩过的坑希望你不用再踩一遍。先装上它搞清楚它到底能干什么安装没什么特别的Chrome、Firefox、Edge 的扩展商店里搜索 Header Editor 就能找到。真正需要留意的是它有两个版本完整版和 Lite 精简版。两者的差别一句话就能说清Lite 版跑在 DNR 模式declarativeNetRequest下性能更好但牺牲了自定义函数和正则排除这类高级能力完整版功能全面支持用 JavaScript 写自定义函数。如果你只是加个头、改个重定向Lite 完全够用如果你要处理动态逻辑选完整版。官方文档里有一张完整的对比表安装前值得扫一眼安装与版本说明。装好之后点击工具栏里的图标你会看到一个管理面板右下角有个按钮——这就是所有故事的起点。写下第一条规则只想给某个域名加请求头怎么配Header Editor 自己不会做任何事它的全部能力来自规则。一条规则由两部分组成匹配条件和执行动作。先讲清楚哪些请求要处理再讲怎么处理。拿我早上那个场景来说我需要给所有指向api.example.com的请求自动带上认证令牌。规则是这样写的匹配条件URL 前缀 https://api.example.com/ 执行动作添加请求头 Authorization: Bearer 你的令牌保存之后刷新页面请求头自动带上不用再手动改一次。就这么简单。匹配条件的类型比你想的丰富正则表达式、网址前缀、域名、完整网址、请求方法GET/POST、资源类型图片、脚本、样式表都可以作为条件。多个条件可以叠加意思是同时满足才生效。反过来你也可以配置排除条件——只要命中排除项这条规则就跳过。比如我只想让某个域名下的图片请求走特殊处理就可以这样写匹配条件域名 img.example.com 资源类型image 执行动作修改请求头 Referer 为 https://example.com这是网上常见的反防盗链思路很多图床会检查 Referer把来源改成允许的地址图片就能正常显示了。详细的匹配类型说明可以看规则文档。遇到拦路的请求怎么办重定向和取消请求头只是第一关。我下午遇到的第二个问题是某个第三方 JS 库加载太慢页面白屏好几秒。删掉它功能又依赖它。Header Editor 的重定向功能直接解决了这个问题——把请求从慢的源改到快的镜像上。比如把 Google 公共库重定向到国内镜像匹配条件正则 ^http(s?)://(ajax|fonts)\.googleapis\.com/(.*) 执行动作重定向至 https://$2.proxy.ustclug.org/$3注意这里用到了$1、$2这样的占位符它们对应正则里括号捕获的内容能把路径原样带过去。也可以做更简单的整站跳转把http://(sale|item|www).jd.com重定向到https://$1.jd.com实现强制 HTTPS。取消请求同样简单。如果你只想拦住带跟踪参数的请求用自定义函数返回特殊值就行if (val.includes(utm_source)) { return _header_editor_cancel_; }这个_header_editor_cancel_是保留字从 4.0.3 开始支持。类似地想把某个头整个删掉把它的值设置为_header_editor_remove_即可——这也是 FAQ 里反复被问到的如何快速删头的标准答案。服务器说了算不响应也能改改请求头是你说了算改响应头是把服务器的话也改一改。最常见的需求就是给响应补 CORS 头跨域问题当场消失匹配条件资源类型 xmlhttprequest 执行动作添加响应头 - Access-Control-Allow-Origin: * - Access-Control-Allow-Methods: GET,POST,PUT,DELETE - Access-Control-Allow-Headers: Content-Type,Authorization甚至响应体也能改。比如把网页里的所有 baidu 替换成 Google规则里写一个自定义函数return val.replace(/baidu/g, Google);这个功能在 Chrome 上走的是chrome.debuggerAPI所以开启时浏览器会提示Header Editor 已开始调试此浏览器这是正常现象不想要这个提示可以在选项里关掉修改响应体的开关。这里有个坑我必须提醒你修改后的响应头在开发者工具里可能不显示这是工具的显示机制决定的不代表修改失败。官方 FAQ 举过一个例子——把content-type改成text/plain后网页确实变成纯文本了但开发者工具里看到的还是text/html。判断是否生效看实际效果别只看面板。规则不生效我踩过的三个坑我这一下午大概改了十几条规则失败的次数比成功的还多。问题基本集中在三处坑一头名称变成小写了。别慌这是符合 HTTP 规范的RFC 2616 规定头名称不区分大小写。从 4.0.0 起 Header Editor 会统一转成小写不是 bug。坑二匹配条件写宽了或写窄了。正则表达式少转义一个点匹配范围就完全变了。排查方法是从最简单的前缀匹配开始确认生效后再逐步收紧。坑三DNR 模式下的功能限制。Lite 版的 DNR 模式不支持正则排除、不支持自定义函数。如果你写了这类规则却不生效先确认你的版本支持不支持。规则是一票否决的——只要有一个能力当前版本不支持整条规则都不生效但它会保留着等你迁移到完整版。还有一点容易被忽略浏览器对特定地址有保护。比如 Chrome 上任何扩展都无权修改chrome.google.com/webstore开头的请求。这不是 Header Editor 的问题是浏览器设的边界。想更进一步自定义函数、分组与备份当添加一个固定头满足不了你时就该上自定义函数了。比如想给 User-Agent 动态追加版本号for (const a in val) { if (val[a].name.toLowerCase() user-agent) { val[a].value HE/2.0.0; break; } }函数会收到当前请求的信息detail对象里包含请求方式、资源类型、来源页面地址等你可以在里面做任意逻辑。完整的函数参数说明见自定义函数文档。调试它有个小技巧函数跑在后台页面里Chrome 上打开扩展的检查视图控制台里的console.log都在那儿。规则多了之后用分组把它们归类认证一组、缓存一组、调试一组面板上可以整体开关方便得很。而导入导出功能负责把规则带走——换电脑、换浏览器、分享给同事都靠它。4.0.5 之后还支持云同步基于浏览器的账号同步机制规则跟着账号走本地一份、云端一份。如果你对它的实现感兴趣请求处理的核心代码在 src/pages/background/request-handler/本地构建也很简单git clone https://gitcode.com/gh_mirrors/he/HeaderEditor pnpm i --frozen-lockfile npm run build:chrome_v3 # Chrome 精简版 npm run build:chrome_v2 # Chrome 完整版下一步去改掉你最头疼的那个请求回看这一天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），仅供参考