fetch 无法直接读取自定义响应头,需服务端通过 access-control-expose-headers 显式声明(如 x-request-id, x-rate-limit-remaining),前端才能用 response.headers.get() 获取;注意逗号分隔无空格、大小写敏感,调试时需检查 network 面板确认响应头及暴露配置。

Fetch 默认不会暴露自定义响应头,必须在服务端显式通过 Access-Control-Expose-Headers 响应头声明,客户端才能通过 response.headers.get() 读取。
服务端必须配置 Access-Control-Expose-Headers
浏览器出于安全限制,只允许 JavaScript 读取部分“简单响应头”(如 Content-Type、Cache-Control、Expires 等)。若响应中包含自定义字段(例如 X-Request-ID、X-Rate-Limit-Remaining),服务端需在 CORS 响应中添加:
Access-Control-Expose-Headers: X-Request-ID, X-Rate-Limit-Remaining- 多个字段用英文逗号分隔,**不能有空格**
- 该头必须由后端设置,前端无法绕过
客户端用 response.headers.get() 获取自定义字段
请求成功后,从 Response 对象的 headers 属性中提取:
fetch('/api/data')
.then(response => {
// ✅ 正确:先确认服务端已暴露该字段
const requestId = response.headers.get('X-Request-ID');
const rateLimit = response.headers.get('X-Rate-Limit-Remaining');
console.log(requestId, rateLimit);
});
注意:get() 方法区分大小写,但 HTTP 头名本身不区分;建议统一用小写或原始命名习惯(如服务端返回 X-Request-ID,就用 'X-Request-ID')。
调试技巧:检查 Network 面板和响应头
如果拿不到值,按以下顺序排查:
- 打开浏览器 DevTools → Network → 找到对应请求 → 查看 Response Headers 标签页,确认存在目标字段(如
X-Request-ID) - 确认该响应头中是否包含
Access-Control-Expose-Headers,且其值包含你要读取的字段名 - 若使用了代理或 CDN,确保中间层没有过滤或覆盖该 CORS 头
补充:获取所有可访问的响应头(仅限已暴露字段)
可通过 response.headers.entries() 遍历当前 JS 可见的全部响应头(即已被 Access-Control-Expose-Headers 允许的那些):
for (const [name, value] of response.headers.entries()) {
console.log(`${name}: ${value}`);
}
这不会列出未被暴露的自定义头,也不会报错 —— 它们 simply won’t appear in the iterator。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











