CORS跨域下fetch及Cache API读取响应头返回空对象的问题

• 你看到的console.log(response.headers)输出空对象，很大概率是控制台的展示误导，不是Headers真的没有可访问字段。Headers是浏览器内置的类Map结构对象，不属于普通可枚举JS对象，Chrome控制台对这类内置对象的默认打印，经常会渲染成空的{}，但内部存储的键值用标准方法是能正常读出来的。
• 如果确实用读取方法也拿不到Date头，那就是跨域权限的拦截问题，常见踩坑点有两个：
  • 你这个请求带了Authorization自定义头，属于带凭证的跨域请求，CORS校验规则比普通跨域严。如果服务端只给普通请求配了CORS规则，没针对这个带认证的请求补上Access-Control-Allow-Credentials: true，而且Access-Control-Allow-Origin直接写了*通配，就算你加了Access-Control-Expose-Headers，浏览器也会直接拦截所有非安全响应头的读取权限。
  • Access-Control-Expose-Headers的格式不对：比如多个字段之间多了空格、头名拼错，都会导致配置失效，浏览器不会放行对应头的读取。
• 为什么从Cache API读出来的响应也显示空对象：
  Cache API存响应的时候，只会存浏览器允许前端JS访问的那部分头字段，不会把服务端返回的全量原始头都放到前端能操作的Response副本里。你在开发者工具的缓存面板看到的全量头信息，是浏览器存储的原始网络数据，不是前端JS拿到的那个Response上挂载的头。工具面板能看的内容，不代表前端代码能访问。

• 别直接打印Headers对象本身，用标准API验证实际能不能读到值，参考代码：

  // 直接读需要的Date字段，别直接console.log(response.headers)
  const cachedDate = response.headers.get('Date');
  console.log('Date头值：', cachedDate);
  // 把Headers转成普通数组打印，就能看到实际所有可访问的头字段
  console.log('当前可访问的全部响应头：', [...response.headers]);
  

• 如果上面的代码拿不到Date值，就回到服务端核对CORS配置：确认针对这个带认证的接口，已经同时设置了允许凭证、指定具体允许的源（不能用通配符）、在Access-Control-Expose-Headers里明确加上Date字段。

内容的提问来源于stack exchange，提问作者Roeland