HTML中如何使用Fetch来设置请求头

Fetch请求头必须用Headers实例，普通对象会被静默忽略；需显式配置credentials才能发送Cookie；application/json时body必须JSON.stringify，否则后端收不到数据。

Fetch请求头必须用Headers对象构造

直接传入普通对象会失败，fetch 不接受 { 'Content-Type': 'application/json' } 这样的字面量。必须用 Headers 实例，否则某些头（如 Authorization）会被静默忽略，尤其在 POST 或带凭证的请求中。

正确写法是：

const headers = new Headers();headers.append('Content-Type', 'application/json');headers.append('Authorization', 'Bearer abc123');fetch('/api/data', {  method: 'POST',  headers,  body: JSON.stringify({ x: 1 })});

• 也可以用数组初始化：new Headers([['Content-Type', 'application/json']])
• 用 set() 替代 append() 可覆盖同名头，避免重复
• 注意：浏览器会自动设置 Content-Length 和部分安全相关头，手动设可能被忽略

哪些请求头Fetch会拒绝或覆盖

浏览器对某些敏感头做了限制，比如 Cookie、Host、Origin、Referer 等，直接设会抛出 TypeError: Invalid header 错误。

常见被拦截的头包括：

立即学习“前端免费学习笔记（深入）”；

• Accept-Charset、Accept-Encoding（除非服务端明确支持）
• Connection、Keep-Alive、Proxy-Authenticate
• Set-Cookie —— 客户端无法主动设置，只能由响应带出

如果看到 Refused to set unsafe header "xxx"，说明该头已被浏览器策略屏蔽，不能绕过。

携带Cookie需要显式配置credentials

默认情况下，fetch 不发送 Cookie，即使设置了 headers 也无效。必须加 credentials 选项。

• credentials: 'omit'（默认）：不发 Cookie
• credentials: 'same-origin'：同源才发（最常用）
• credentials: 'include'：始终发，跨域时后端需返回 Access-Control-Allow-Credentials: true

漏掉这个配置，Authorization 头可能正常，但登录态却丢失 —— 因为后端依赖 Cookie 验证身份。

Content-Type为application/json时body必须是字符串

很多人以为设了 Content-Type: application/json 就能直接传对象，结果后端收不到数据。这是因为 fetch 不会自动序列化 body。

• 错：body: { name: 'alice' } → 发送的是 [object Object]
• 对：body: JSON.stringify({ name: 'alice' })

另外，如果后端要求 Content-Type: application/x-www-form-urlencoded，就得用 URLSearchParams 构造 body，而不是拼接字符串 —— 否则空格、中文等字符会编码错误。

Header 设置看着简单，但容易在 credentials、Content-Type 与 body 格式、以及浏览器头限制之间掉坑里。最常被忽略的是：没配 credentials 却指望 Cookie 生效，或者忘了 JSON.stringify 就直接塞对象进 body。