必须由服务端设置 access-control-expose-headers 才能读取自定义响应头；前端 fetch 后通过 response.headers.get() 获取已暴露字段，否则返回 null 或报“unsafe header”错误。
Fetch API 默认只暴露部分响应头字段（如 Content-Type、Content-Length、Cache-Control 等），而自定义响应头（比如 X-Request-ID、X-RateLimit-Remaining）**不会自动出现在 response.headers 中**，除非服务端明确通过 Access-Control-Expose-Headers 响应头声明它们。
服务端必须设置 Access-Control-Expose-Headers
这是最关键的前置条件。浏览器出于安全限制，只会将 Access-Control-Expose-Headers 列出的字段暴露给 JavaScript 读取。如果服务端没配，前端无论怎么写都拿不到自定义头。
例如，后端需返回：
Content-Type: application/json
X-Request-ID: abc123
X-RateLimit-Remaining: 98
Access-Control-Expose-Headers: X-Request-ID, X-RateLimit-Remaining
前端用 headers.get() 读取暴露后的字段
一旦服务端正确配置，就可以在 fetch 的 response 中安全调用 headers.get()：
-
response.headers.get('X-Request-ID')→ 返回字符串值（如"abc123"） -
response.headers.has('X-RateLimit-Remaining')→ 检查字段是否存在 -
response.headers.entries()或response.headers.forEach()→ 遍历所有已暴露的头（注意：仅限Access-Control-Expose-Headers允许的）
常见错误和排查建议
- 控制台报错
Refused to get unsafe header "X-Request-ID"→ 表明服务端未在Access-Control-Expose-Headers中声明该字段 - 返回
null或undefined→ 先确认服务端确实返回了该头，再检查是否被暴露；可用浏览器 Network 面板查看 Response Headers 原始内容 - 使用
credentials: 'include'时，服务端还需设置Access-Control-Allow-Origin为具体域名（不能是*）
完整示例代码
前端：
fetch('/api/data', {
method: 'GET',
headers: { 'Authorization': 'Bearer token123' }
})
.then(response => {
if (!response.ok) throw new Error(response.statusText);
const reqId = response.headers.get('X-Request-ID');
const rateLimit = response.headers.get('X-RateLimit-Remaining');
console.log('Request ID:', reqId); // "abc123"
console.log('Rate limit remaining:', rateLimit); // "98"
return response.json();
})
.catch(err => console.error('Fetch failed:', err));大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
