为什么 getAllResponseHeaders() 输出与浏览器看到的不同？答案

【问题标题】：Why does getAllResponseHeaders() output differ from what the browser sees?为什么 getAllResponseHeaders() 输出与浏览器看到的不同？
【发布时间】：2018-02-21 23:12:01
【问题描述】：

我有一段简单的代码，试图从 URL 响应中读取一些标头：

$.ajax(manifestAnchor.href, {
    type: "HEAD"
}).done((data, textStatus, jqXHR) => {
    console.log(jqXHR.getAllResponseHeaders());
});

在我的测试用例中，输出如下：

date: Wed, 13 Sep 2017 09:44:15 GMT content-type: application/vnd.apple.mpegurl cache-control: no-cache

但是，在浏览器中检查响应时，我看到一组不同的标头：

为什么会这样？

【问题讨论】：

标签： javascript google-chrome http xmlhttprequest cors

【解决方案1】：

您的浏览器将您的前端 JavaScript 代码限制为只能访问 Cache-Control、Content-Language、Content-Type、Expires、Last-Modified 和 Pragma 响应标头，除非响应具有 @ 987654328@ 响应标头，其中列出了浏览器还应公开的其他标头名称。

见https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers

对于问题中显示的响应，Access-Control-Expose-Headers: Date 响应标头告诉浏览器也公开Date 标头。因此，您的代码能够获取该标头。但是 Access-Control-Expose-Headers 标头没有列出 Server、Accept-Ranges 或 Content-Length 标头名称。所以你的代码无法得到这些。

同样，您的浏览器会阻止您的代码访问这些内容。浏览器本身获取所有响应标头，这就是您可以在浏览器开发工具中看到它们的原因。但是仅仅因为你可以在那里看到它们并不意味着浏览器会将它们暴露给你的代码。浏览器只会公开Access-Control-Expose-Headers 标头告诉它公开的内容。

【讨论】：