如何从 fetch 中获取响应的标头

Posted 2023-02-27

【中文标题】如何从 fetch 中获取响应的标头

【英文标题】：How to get headers of the response from fetch

【发布时间】：2016-12-21 14:05:14

【问题描述】：

我在 chrome 版本 52.0.2743.82（64 位）上使用 fetch。我想获取响应中的所有标题。跟随 sn-p 仅返回 content-type 但如果您查看 chrome 开发工具，它会显示许多其他响应标头。如何从 fetch 中获取其他标头。

  fetch('https://httpbin.org/get')
    .then(response => 
       const headers = response.headers.entries();
       let header = headers.next();
       while (!header.done)
         console.log(headers.value);
         header = header.next();
       
    )

我尝试对 github 实现进行 polyfill（手动覆盖）。还是没有运气。

【问题讨论】：

如果你知道你在找什么标题，你可以试试 response.headers.get('header-name')

查看本页底部的兼容性表，它并没有说 chrome 支持 entry()。 developer.mozilla.org/en-US/docs/Web/API/Headers

【参考方案1】：

通过 ajax 请求跨域内容时，您无法访问所有标头。如果来源相同，您可以访问所有标题。

如 W3 规范 here 中所述，仅可访问 Content-Type、Last-modified、Content-Language、Cache-Control、Expires、Pragma 标头。

进一步的https://httpbin.org/get 仅发送可访问标头列表中的Content-Type 标头，所以，您只得到了那个。

编辑：您可以通过发送 Access-Control-Expose-Headers 以及您希望客户端在响应中访问的标头来公开非标准 CORS 响应标头。

【讨论】：

这非常有帮助。对于那些 Rails 5 开发人员来说，编辑config/initializers/cors.rb 是有效的。我在resource '*' 声明中添加了：expose: ['Location'],

为服务器上的 Access-Control-Expose-Headers 添加自定义标头，以允许浏览器获取 CORS 上的自定义标头。 res.setHeader('Access-Control-Expose-Headers', 'my-custom-header');