HTMLHeaders构造函数使用详解

HTML Headers 构造函数看似简单，实则暗藏多个易踩坑的关键细节：它**绝不接受普通对象字面量**（如 `{ 'Content-Type': 'application/json' }`），仅支持空参数、二维数组或 Map 等可迭代结构；`set()` 与 `append()` 在处理重复 header 时语义迥异，影响请求行为；复用 Headers 实例需警惕可变性导致的污染风险，推荐每次 fetch 前显式拷贝；更需留意浏览器对敏感 header（如 Host、Sec-* 等）的静默过滤机制——手动设置也不会发出，务必通过 DevTools Network 面板眼见为实，并配合服务端 CORS 配置验证。掌握这些底层规则，才能写出健壮、可预测的 Fetch 请求头逻辑。

Headers 构造函数能直接传对象吗？

不能。直接传普通对象（比如 {'Content-Type': 'application/json'}）会报错：TypeError: Failed to construct 'Headers': Invalid value。Headers 构造函数只接受两种输入：空参数、或一个可迭代对象（如数组、Map），且每项必须是长度为 2 的数组（键值对）。

常见错误写法：

new Headers({'Content-Type': 'application/json'}) // ❌ 报错

正确写法：

new Headers([['Content-Type', 'application/json']]) // ✅
new Headers(new Map([['Content-Type', 'application/json']])) // ✅
new Headers() // ✅ 空实例，后续用 <code>append()</code> 或 <code>set()</code>

set() 和 append() 的行为差异在哪？

set() 会覆盖同名 header，append() 允许重复（例如多个 Cookie 字段）。实际发请求时，浏览器会按规范合并（如用逗号分隔），但语义不同。

• 用 set() 设置单值 header（如 Authorization、Accept）更安全，避免意外叠加
• 用 append() 处理本就允许多值的 header（如 Cookie、Cache-Control），或需动态追加场景
• set() 对大小写不敏感（set('content-type', ...) 等价于 set('Content-Type', ...)），但读取时原始大小写可能丢失（取决于浏览器实现）

Fetch 请求中 Headers 实例能否复用？

可以，但要注意不可变性陷阱。Headers 实例本身是可变的（set/append 会修改原实例），如果多个 fetch() 共享同一个 Headers 实例，后一次调用可能污染前一次的 header。

安全做法：

• 每次 fetch 前新建 Headers 实例（最稳妥）
• 或用 new Headers(existingHeaders) 浅拷贝（注意：这会复制当前所有键值，但不深拷贝值）
• 避免在函数外维护一个全局可变的 Headers 实例

示例：

const baseHeaders = new Headers([['Accept', 'application/json']]);
fetch('/api/users', { headers: new Headers(baseHeaders) }); // ✅ 安全拷贝
fetch('/api/posts', { headers: baseHeaders }); // ❌ 后续修改会影响本次请求

自定义 header 被静默丢弃怎么办？

浏览器会自动过滤掉某些危险或受限制的 header，比如 Host、Connection、Content-Length、Origin，还有以 Sec- 开头的（如 Sec-Fetch-Mode）。这些字段即使手动 set() 也不会出现在发出的请求中，也不报错。

排查建议：

• 打开 DevTools → Network → 点击请求 → 查看 **Request Headers** 面板，确认字段是否真的发出
• 服务端日志或代理（如 curl / Charles）验证，排除浏览器拦截干扰
• 需要绕过限制（如测试 CORS 预检）只能用服务端代理，前端无法强制发送被禁 header

另外，非简单 header（如 Content-Type: application/json）会触发 CORS 预检请求，确保服务端已配置 Access-Control-Allow-Headers。

Headers 的构造和管理看似简单，但容易在复用、赋值方式、浏览器限制这几处出问题。尤其注意不要把对象直接传给构造函数，也别假设 set 后的 header 一定出现在网络请求里——眼见为实，始终用 Network 面板验证。

今天关于《HTMLHeaders构造函数使用详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！