直接用 response.headers.get("Header-Name") 读取响应头，大小写不敏感但建议标准命名；跨域时自定义头需后端在 Access-Control-Expose-Headers 中显式声明，否则返回 null；headers 可在 response 对象创建后立即访问，无需等待 body 解析。
直接用 response.headers.get("Header-Name") 即可读取后端返回的响应头，注意大小写不敏感，但建议按标准命名习惯书写（如 "Content-Type"、"X-Request-ID"）。
确认 headers 是否可访问
Fetch API 返回的 Response 对象的 headers 是一个 Headers 实例，支持 .get()、.has()、.entries() 等方法。但需注意：
- 跨域请求时，只有 CORS 安全列表头（如
Cache-Control、Content-Language、Content-Type等）默认可读； - 自定义头（如
X-Total-Count、Authorization）必须由后端在Access-Control-Expose-Headers中显式声明，前端才能通过.get()获取； - 若未正确配置 CORS，调用
response.headers.get("X-My-Custom-Header")会返回null，且无报错。
基础用法示例
假设后端返回了 X-Request-ID 和 Content-Length，且已正确暴露：
fetch("/api/data")
.then(response => {
const reqId = response.headers.get("X-Request-ID"); // ✅ 可获取
const length = response.headers.get("Content-Length"); // ✅ 标准头，默认可读
const contentType = response.headers.get("content-type"); // ✅ 大小写不敏感
console.log({ reqId, length, contentType });
});
常见问题与检查点
如果 .get() 返回 null 或 undefined，请依次检查：
- 浏览器开发者工具 Network 面板中，查看该响应的 Headers → Response Headers，确认目标 header 确实存在；
- 检查响应头中是否包含
Access-Control-Expose-Headers: X-Request-ID, X-Total-Count（多个用逗号分隔）； - 确认不是在
response.text()或response.json()之后才读取 headers ——headers在Response对象创建后即可访问，无需等待 body 解析； - 避免拼写错误，例如
"x-request-id"和"X-Request-Id"效果相同，但"x-request_id"（下划线）就无法匹配。
安全提示：不要依赖敏感 header 做关键逻辑
响应头属于客户端可篡改的通信元数据，不可用于权限校验、身份认证或业务核心判断。 例如：
– 不要用 response.headers.get("X-User-Role") 控制页面按钮显示；
– 不要通过 X-Auth-Token 头替代 cookie 或 Authorization bearer token 进行后续请求。
应始终以服务端实际返回的 JSON 数据 + 后端鉴权为准。
