浏览器请求管理入门：用Header Editor修改请求头，五个步骤上手网络调试

浏览器请求管理入门：用Header Editor修改请求头，五个步骤上手网络调试

【免费下载链接】HeaderEditorManage browser's requests, include modify the request headers, response headers, response body, redirect requests, cancel requests项目地址: https://gitcode.com/gh_mirrors/he/HeaderEditor

你有没有过这种时刻：接口联调时，前端代码里写死了开发环境的地址，为了切到测试环境，得改代码、重新打包、刷新页面，来回折腾十几分钟；或者想调试一个接口，却因为没有认证令牌被服务器无情拒绝；再或者明明只是想看看某个网页在不同设备上的表现，却被固定的User-Agent限制住。

这些问题的根源都指向同一个地方——浏览器发出的网络请求。而Header Editor这款免费开源扩展，就是专门帮你"接管"这些请求的：修改请求头、修改响应头、改写响应内容、重定向请求、取消请求，全部通过可视化规则完成，不需要碰任何业务代码。本文就从零开始，带你用五个步骤完成第一条浏览器请求管理规则，再逐步解锁它的常见用法。

Header Editor到底是什么：给网络请求当"邮差"

先做一个比喻。每次你打开网页，浏览器都会给服务器寄出很多"信件"——这就是网络请求。信封上的收件人、寄件人、邮戳、备注，对应着请求里的URL和各类请求头；服务器回信时贴的邮票、盖章，则对应着响应头；而信封里装的正文，就是响应体。

Header Editor就是一个站在你家门口的"邮差助手"，你可以提前告诉它：哪些信要改收件人（重定向）、哪些信要在信封上多写几句话（修改请求头）、哪些回信要撕掉某一页（修改响应体）、哪些信直接拒收（取消请求）。它本身不产生任何功能，一切行为都来自你编写的规则——这正是它灵活的地方：规则由你全权掌控，想管什么、不想管什么，一目了然。

项目核心的请求处理代码集中在src/pages/background/request-handler/目录，想研究实现细节的读者可以进去翻一翻。

五分钟上手：从安装到跑通第一条规则

第一步：选对版本

Header Editor 提供两个版本，区别很实在：

对绝大多数人来说，先从精简版开始就够用了；需要自定义函数这类高级能力时再换完整版，规则可以原样迁移。

第二步：装上扩展

Firefox 用户直接到官方附加组件商店搜索 Header Editor 安装；Chrome 用户在扩展商店安装精简版即可；Edge 用户同样有对应的完整版。想自己动手构建的开发者，可以这样操作：

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 精简版

构建产物会输出到dist_目录，打开浏览器的扩展管理页，开启开发者模式后"加载已解压的扩展程序"即可。

第三步：打开管理面板

点击浏览器右上角的 Header Editor 图标，进入管理界面。页面上所有规则一目了然，右下角的加号按钮就是新建规则的入口。

第四步：填一份"规则表"

新建规则时，你只需要想清楚三件事：

1. 匹配什么——哪些请求要被处理（按 URL、域名、正则、请求方法、资源类型等）
2. 排除什么——哪些请求明确不处理（可选）
3. 做什么——添加/修改/删除请求头、修改响应头、重定向、取消请求、修改响应体

比如，给开发环境的所有接口自动带上认证令牌，规则可以这样写：

第五步：保存并观察效果

保存后规则立即生效，不用重启浏览器。打开开发环境页面，按 F12 进入网络面板，就能看到每个 API 请求都自动带上了你添加的请求头。

它能帮你解决哪些实际问题

场景一：环境切换不再改代码

联调时最烦的就是在开发、测试、生产环境之间反复切换。用 Header Editor，可以分别建三条"修改请求头"规则，各自匹配不同的环境域名，平时全部关闭，需要哪个环境就打开哪条开关——前后端代码一行不动，点击一次搞定环境切换。规则分组功能还能把同一项目的规则收进一个组里，批量启停。

场景二：跨域和防盗链问题

前端调用第三方接口遇到跨域限制时，可以添加响应头规则，给响应补充 CORS 信息：

• Access-Control-Allow-Origin: *
• Access-Control-Allow-Methods: GET,POST,PUT,DELETE
• Access-Control-Allow-Headers: Content-Type,Authorization

图片防盗链的经典解法也一样：把图片域名设为匹配条件，再把请求头里的Referer修改成可正常访问的来源网址，比如把imgsrc.baidu.com的图片请求的 Referer 改成tieba.baidu.com。

场景三：访问受限内容与模拟设备

某些站点会按地区或设备做限制。想模拟手机访问，匹配对应域名，把请求头的User-Agent改成 iPhone 的 UA 字符串即可。注意一点：这种方式只能影响服务器端的判断，如果网站用前端 JavaScript 检测 UA，是伪装不了的。

场景四：强制 HTTPS 与替换公共库

一些老网站还停留在 HTTP，或者引用了访问缓慢的公共库。重定向规则能直接解决：

• 把http://的维基百科请求重定向到https://，一行正则搞定
• 把 Google 公共库的请求重定向到国内镜像，正则^http(s?)://(ajax|fonts)\.googleapis\.com/(.*)重定向到https://$2.proxy.ustclug.org/$3，加载速度立竿见影

正则匹配还支持$1这类占位符，重定向规则里可以直接引用捕获组。

场景五：取消你不想要的请求

广告脚本、埋点统计、跟踪请求，都可以用"取消请求"规则直接拦下。自 4.0.3 起，在重定向规则的自定义函数里返回_header_editor_cancel_也能阻止请求，判断逻辑可以写得很精细，比如只拦截 URL 里带utm_source的请求。

场景六：给网页动"手术"——修改响应体

完整版支持修改响应体。想让某张网页上的所有"baidu"都变成"Google"？匹配该网页，选择修改响应体，自定义函数写一行即可：

return val.replace(/baidu/g, 'Google');

这个功能在 Chrome 上依赖调试接口，启用时会看到"Header Editor 已开始调试此浏览器"的提示，属正常现象，不想要提示可以在选项中关闭"修改响应体"功能。

进阶玩法：从会用到用好

自定义函数，让规则"活"起来

完整版支持在重定向、修改请求头、修改响应头三类规则里编写 JavaScript 自定义函数。函数收到两个参数：val（当前 URL 或头信息数组）和detail（请求详情），后者能拿到请求方法、资源类型、标签页 ID 等上下文，实现条件化处理。比如只把 example.com 下的图片和视频重定向到 example.org：

if (detail.type === "media") { return val.replace("example.com", "example.org"); }

调试自定义函数时，打开扩展的后台页面控制台即可：Chrome 在扩展管理页启用开发者模式后点击"检查视图"，Firefox 则通过about:debugging附加组件调试。

一个隐藏技巧：删除请求头

想删除某个头，不必另找删除功能——把头内容设置为_header_editor_remove_，Header Editor 就会移除这个头（3.0.5 起支持）。这个约定也适用于响应头。

规则迁移、备份与云同步

管理面板自带"导入和导出"功能，可以把全部规则导出成 JSON 文件，换电脑、换浏览器、团队协作分享都靠它。4.0.5 起还支持云同步：登录浏览器账号并开启同步后，规则和分组会随浏览器自带同步功能自动备份——数据存在浏览器服务商的服务器上，Header Editor 自己的服务器不保存任何备份。

Lite 与完整版怎么选

一句话：能用 DNR 模式的场景尽量用 Lite，性能更好；需要自定义函数、正则排除或 Chrome 下的完整响应体能力时再切完整版。注意，如果某条规则用到了当前版本不支持的功能，整条规则都不会生效，但规则本身会保留，等待你迁移到合适的版本。

新手避坑指南

规则不生效，从这五个地方排查

1. 规则开关是否打开，分组是否被整体禁用
2. 匹配条件是否过严（URL 前缀是否漏了https://）或过宽（正则写错）
3. 是否被排除规则命中——排除条件优先级更高，只要命中一条就不执行
4. 浏览器是否限制了该 URL 的修改（比如 Chrome 不允许扩展修改chrome.google.com/webstore开头的请求）
5. 换一版运行模式试试：DNR 模式性能好，但部分功能受限，可把规则强制切到 Web Request 模式

三个容易误会的现象

• 开发者工具里看不到修改后的响应头：这是正常现象，开发者工具显示的是原始响应头，不代表修改失败。把content-type改成text/plain，网页变成纯文本，就说明修改生效了
• 头名称变成小写：HTTP 规范本身不区分头名称大小写，4.0.0 起 Header Editor 统一为小写，属正常行为
• 头内容留空：Chrome 会保留空头，Firefox 会直接移除该头，跨浏览器表现不一致

隐私模式与规则丢失

Firefox 隐私模式下，管理面板不可用但规则仍生效；Chrome 需要在扩展详情里手动开启"以隐身模式启用"。如果发现 Firefox 中规则莫名消失，检查about:config里的dom.indexedDB.enabled是否为true，并留意配置文件夹中是否有大量 0 字节的prefs-*.js文件——处理前请务必先备份浏览器配置文件。

下一步：去建你的第一条规则

Header Editor 的核心理念是"规则即功能"：它不强加任何行为，而是把网络请求的控制权完整交到你手里。无论你是想省下切换环境的十分钟，还是想绕过防盗链、强制 HTTPS、拦掉烦人的统计请求，都可以用三五分钟写出一条规则，立刻看到效果。

安装好扩展，点开管理面板，从今天最让你头疼的那个请求开始——添加一个认证头，或者重定向一条慢请求。等第一条规则生效的瞬间，你会发现自己已经掌握了浏览器请求管理的基本功。剩下的，就是按需扩充你的规则库了。

想深入了解匹配类型、自定义函数等细节，可以翻看项目自带的文档目录docs/docs/zh-CN/guide/，里面从规则编写到云同步都有对应说明。

【免费下载链接】HeaderEditorManage browser's requests, include modify the request headers, response headers, response body, redirect requests, cancel requests项目地址: https://gitcode.com/gh_mirrors/he/HeaderEditor