服务端必须配置 Access-Control-Expose-Headers 显式暴露自定义响应头（如 X-Request-ID），否则 Fetch API 无法读取；浏览器仅允许访问默认头或该头声明的字段，且需注意逗号分隔无空格、大小写敏感及预检请求中同步配置。

Fetch API 默认不会暴露所有响应头，尤其是自定义字段（比如 X-Request-ID、X-RateLimit-Remaining），除非服务器在 Access-Control-Expose-Headers 响应头中明确列出它们。

确保服务端正确配置 CORS 暴露头

这是最关键的前置条件。浏览器出于安全限制，只允许 JavaScript 读取一部分“简单响应头”（如 Cache-Control、Content-Type、Expires 等）。自定义头必须由服务端显式声明：

• 服务端需在响应中设置：Access-Control-Expose-Headers: X-Request-ID, X-RateLimit-Remaining
• 如果要暴露多个字段，用英文逗号分隔，**不能有空格**（规范要求）
• 该头必须出现在预检请求（OPTIONS）的响应中（若请求触发了预检）

在 JavaScript 中读取暴露后的自定义头

一旦服务端正确暴露，就可以用 response.headers.get() 或 response.headers.forEach() 获取：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

fetch('/api/data')
  .then(response => {
    // ✅ 可以读取（前提是服务端已暴露）
    const requestId = response.headers.get('X-Request-ID');
    const remaining = response.headers.get('X-RateLimit-Remaining');

    console.log('Request ID:', requestId);
    console.log('Rate limit remaining:', remaining);

    return response.json();
  })
  .catch(err => console.error(err));

检查哪些头实际可用（调试技巧）

开发时不确定哪些头能被访问？可以遍历并打印所有可读头：

立即学习“Java免费学习笔记（深入）”；

fetch('/api/data')
  .then(response => {
    // 打印所有可访问的响应头名（仅限暴露或默认允许的）
    for (const [name, value] of response.headers) {
      console.log(`${name}: ${value}`);
    }
  });

注意：这个循环只会显示浏览器允许你读取的头，不会报错也不会显示未暴露的自定义头。

常见错误与排查

• 返回 null 或 undefined：大概率是服务端没设 Access-Control-Expose-Headers，或拼写不一致（区分大小写）
• CORS 错误直接阻断请求：检查 Network 面板中响应的 Access-Control-Allow-Origin 和 Access-Control-Expose-Headers 是否存在且合法
• 本地开发跨域问题：后端需对开发环境（如 http://localhost:3000）也启用对应 CORS 头