fetch通过headers选项设置自定义请求头，支持对象或Headers实例；但禁用头（如Cookie、Host等）会被静默忽略，跨域时非简单头触发OPTIONS预检，且响应头需由Access-Control-Expose-Headers显式暴露才可读取。
JavaScript 的 fetch 可以通过 headers 选项轻松携带自定义请求头，但需注意跨域限制、预检机制和响应头读取权限等细节。
如何在 fetch 中设置自定义请求头
使用 headers 配置项，支持传入对象或 Headers 实例：
- 对象写法（常用）：键名不区分大小写，但建议用标准命名（如
Content-Type） -
Headers实例更灵活，适合动态增删或复用：
const headers = new Headers();
headers.set('Authorization', 'Bearer abc123');
headers.append('X-Client-ID', 'web-v2');
fetch('/api/data', {
method: 'POST',
headers,
body: JSON.stringify({ name: 'Alice' })
});
哪些自定义请求头会被浏览器自动忽略
为安全起见，浏览器禁止手动设置部分“禁用头”（safelisted headers），包括：
-
Accept-Charset、Accept-Encoding -
Connection、Content-Length（除非使用chunked编码） -
Cookie、Host、Referer、User-Agent -
Sec-开头的头（如Sec-Fetch-Mode）
尝试设置这些头不会报错，但会被静默丢弃。
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
跨域请求中自定义头触发预检（CORS Preflight）
只要设置了非简单头（如 Authorization、X-Request-ID），且方法不是 GET/HEAD/POST，或 Content-Type 不是 application/x-www-form-urlencoded、multipart/form-data、text/plain，浏览器就会先发一个 OPTIONS 预检请求。
此时后端必须正确响应，否则主请求被阻止：
- 返回
Access-Control-Allow-Origin（不能为*，若带凭据则必须明确指定域名） - 返回
Access-Control-Allow-Headers，列出允许的自定义头（如Authorization, X-Client-ID） - 若请求带
credentials（如 cookie 或 token），还需返回Access-Control-Allow-Credentials: true
如何读取响应中的自定义响应头
默认情况下，fetch 只暴露部分“简单响应头”（Cache-Control、Content-Language、Content-Type 等）。若要读取自定义响应头（如 X-RateLimit-Remaining），后端必须在预检响应中声明：
Access-Control-Expose-Headers: X-RateLimit-Remaining, X-Request-ID
前端才能安全访问：
fetch('/api/data')
.then(res => {
console.log(res.headers.get('X-RateLimit-Remaining')); // ✅ 可读（前提是已暴露）
console.log(res.headers.get('Set-Cookie')); // ❌ 始终不可读（敏感头被浏览器屏蔽）
}); 
