为什么getAllResponseHeaders（）输出与浏览器看到的不同？

Question

我有一个简单的代码位与我试图读出一个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

然而，当检查浏览器中的响应时，我看到一组不同的标头：

这是为什么？

Answer 1

您的浏览器限制你的前端JavaScript代码只能够访问Cache-Control，Content-Language，Content-Type，Expires，Last-Modified和Pragma响应头，除非响应具有Access-Control-Expose-Headers响应头列出其他头名，浏览器应也暴露。

看到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标题名称。所以你的代码无法获得这些。

再一次，你的浏览器是什么阻止你的代码获取这些。浏览器本身获取所有的响应标题，这就是为什么你可以在浏览器devtools中看到它们的原因。但仅仅因为你可以看到它们并不意味着浏览器会将它们暴露给你的代码;浏览器将只公开Access-Control-Expose-Headers标题告诉它公开的内容。