headers对象用于管理请求头，支持字符串赋值、批量初始化、动态增删及大小写不敏感读取，是控制鉴权、内容类型和跨域的关键。
Fetch 的 Headers 对象是专门用来管理请求头的，它既支持简单字符串赋值，也支持批量初始化、动态增删、大小写不敏感读取等能力。用好它，才能精准控制鉴权、内容类型、跨域行为等关键环节。
创建和初始化 Headers
Headers 可以通过构造函数传入对象、数组或另一个 Headers 实例来初始化：
- 传入普通对象（键名自动转为小写，值会自动转为字符串）：
new Headers({ 'Content-Type': 'application/json', Authorization: 'Bearer abc123' }) - 传入二维数组（适合含重复头字段的场景，如多个
Set-Cookie）：new Headers([['Accept', 'application/json'], ['Accept', 'text/plain']]) - 复制已有 Headers：
new Headers(existingHeaders)—— 注意这是浅拷贝，修改副本不影响原实例
动态设置与读取请求头
Headers 提供了链式方法，但注意：所有 setter 方法（如 set、append）都会返回 void，不能链式调用；如需连续操作，得逐行写：
-
headers.set('Content-Type', 'multipart/form-data; boundary=abc')—— 覆盖同名头 -
headers.append('Cookie', 'sid=xyz')—— 追加，允许多个同名头 -
headers.get('authorization')—— 键名不区分大小写，返回第一个匹配值（或null） -
headers.has('x-api-version')—— 判断是否存在（同样不区分大小写） -
headers.delete('X-Requested-With')—— 删除指定头
常见复杂头配置示例
实际开发中，这些组合很典型：
-
带 Token 的 JSON 请求：
const headers = new Headers({ 'Content-Type': 'application/json' });<br> headers.set('Authorization', `Bearer ${token}`); -
上传文件时的 multipart 请求：
不要手动设Content-Type！浏览器会自动生成带 boundary 的值；若手动设置，反而可能出错。
正确做法：const formData = new FormData();<br> formData.append('file', fileInput.files[0]);<br> fetch('/upload', { method: 'POST', body: formData }); // headers 自动处理 -
模拟移动端 User-Agent + 自定义版本头：
headers.set('User-Agent', 'MyApp/2.3.0 (iOS; 17.4)');<br> headers.set('X-App-Version', '2.3.0'); -
禁用缓存 + 强制刷新：
headers.set('Cache-Control', 'no-cache');<br> headers.set('Pragma', 'no-cache');<br> headers.set('Expires', '0');
注意事项与避坑点
Headers 看似简单，但几个细节容易引发问题：
- 某些头（如
Host、Content-Length、Connection）是禁止手动设置的，浏览器会忽略或报错 - 使用
FormData作为body时，不要传Content-Type头——浏览器会自动设为multipart/form-data并附带正确 boundary - 在
mode: 'no-cors'下，只允许设置有限的头（Accept、Accept-Language、Content-Language、Content-Type中的部分子集），其余会被静默丢弃 - Headers 实例是可迭代的：
for (let [name, value] of headers) { console.log(name, value); }—— 适合调试或日志输出
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
