使用 fetch 发起带自定义请求头的请求需通过 headers 选项配置，可用对象字面量或 Headers 实例；注意 Content-Type 与 body 类型匹配，禁用头如 Content-Length、Cookie 等无法手动设置，携带 Cookie 需 credentials: 'include'，读取响应头需服务端在 Access-Control-Expose-Headers 中暴露。
用 fetch 发起带自定义请求头的请求，关键在于正确配置 headers 选项，且注意某些头部字段受浏览器限制不能手动设置。
基本写法：通过 Headers 对象或对象字面量传入
你可以用普通对象或 Headers 实例来设置请求头。两者效果一致，但 Headers 更适合动态操作（比如追加、删除）。
- 用对象字面量（最常用）：
fetch('/api/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer abc123',
'X-Client-ID': 'web-v1'
},
body: JSON.stringify({ name: 'Alice' })
});
- 用
Headers实例（适合需要多次修改头的场景）：
const headers = new Headers();
headers.set('Content-Type', 'application/json');
headers.append('Authorization', 'Bearer abc123'); // append 和 set 都可，set 会覆盖同名项
headers.append('X-Trace-ID', 'req-789');
fetch('/api/data', {
method: 'POST',
headers,
body: JSON.stringify({ name: 'Alice' })
});
注意不可手动设置的“禁止头”（Forbidden Headers）
浏览器出于安全考虑，禁止 JavaScript 显式设置部分请求头。如果写了，fetch 会静默忽略，不会报错，但也不会生效。
- 常见被禁止的头包括：
Accept-Charset、Accept-Encoding、Connection、Content-Length（除非body是FormData或Blob等非字符串类型）、Cookie、Host、Origin、Referer、Sec-Fetch-*等 - 例如：
headers: { 'Content-Length': '100' }不会生效；浏览器自动计算并设置 - 想携带 Cookie？需显式开启
credentials选项：credentials: 'include'（服务端也需允许）
发送 JSON 请求时的典型组合
这是最常见需求，务必确保 Content-Type 和 body 类型匹配：
-
Content-Type: application/json→body必须是字符串（通常JSON.stringify()） - 漏掉
Content-Type头，后端可能无法识别为 JSON，导致解析失败 - 错误示例：
body: { name: 'Alice' }（未序列化）→ 后端收到的是[object Object]
fetch('/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
},
body: JSON.stringify({ email: 'user@example.com', password: '123' }),
credentials: 'include' // 如需带 cookie
});
处理响应头和跨域注意事项
你发出去的自定义头会影响服务端行为，但能否读取响应头取决于服务端是否在 Access-Control-Expose-Headers 中明确列出。
- 默认只能读取
Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma - 若服务端返回了
X-Rate-Limit，但没暴露它：response.headers.get('X-Rate-Limit')会返回null - 解决方法：后端需设置响应头
Access-Control-Expose-Headers: X-Rate-Limit, X-Request-ID
