在 JavaScript 中使用 Fetch API 设置自定义请求头，需在 init 对象中配置 headers 选项，支持普通对象或 Headers 实例；注意避免受限制头、处理 CORS 预检、勿手动设 Content-Length，并确保 Content-Type 与 Token 格式正确。
在 JavaScript 中使用 Fetch API 设置自定义请求头，关键是在 fetch() 的第二个参数（init 对象）中传入 headers 选项，并确保其值是一个 Headers 实例或可枚举的键值对对象。
直接用对象字面量设置 headers
最常用的方式是传入一个普通对象，键为请求头名（大小写不敏感），值为对应字符串：
- header 名推荐用小驼峰或全小写（如
"content-type"、"authorization"），浏览器会自动标准化 - 避免设置某些受限制的 header（如
"Host"、"Content-Length"、"Connection"等），浏览器会忽略或报错 - 示例：
fetch('/api/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer abc123',
'X-Request-ID': 'req-789'
},
body: JSON.stringify({ name: 'Alice' })
});
用 Headers 构造函数更灵活地管理请求头
当需要动态添加、追加、删除或复用请求头时，推荐先创建 Headers 实例：
Java Maven Common
下载
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
- 支持链式调用（
.set()、.append()、.delete()） - 可基于已有 headers 扩展（例如从全局 token 获取后统一注入）
- 示例：
const headers = new Headers();
headers.set('Content-Type', 'application/json');
headers.append('Authorization', 'Bearer ' + token);
headers.append('X-Trace-ID', Math.random().toString(36).substr(2, 9));
fetch('/api/submit', {
method: 'PUT',
headers,
body: JSON.stringify(data)
});
注意 CORS 和预检请求（Preflight）的影响
如果目标接口启用了 CORS，且你设置了非简单请求头（如 'Authorization' 或自定义头 'X-Custom-Header'），浏览器会自动发起 OPTIONS 预检请求：
立即学习“Java免费学习笔记（深入）”；
- 服务端必须响应有效的
Access-Control-Allow-Headers，显式允许你的自定义头名 - 否则控制台会报错："CORS header ‘Access-Control-Allow-Headers’ missing"
- 简单请求头（
Accept、Content-Type、Content-Language等）不会触发预检
常见问题与建议
-
不要在 headers 中手动设置
Content-Length：Fetch 会自动计算并设置，手动设可能引发错误 -
发送 JSON 时务必设
Content-Type: application/json，否则后端可能无法正确解析 -
Token 类型要匹配：比如
Bearer、Basic、API-Key，注意拼写和空格 - 调试时可在浏览器 DevTools 的 Network 标签页查看实际发出的 Request Headers，确认是否生效
