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。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
