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 中初始化和管理阿里云 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')); // ❌ 始终不可读(敏感头被浏览器屏蔽)
});Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










