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

Question

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

<script type="text/javascript">
    window.onload=function(){
        querystring = location.search;
        // do something
    }
</script>

其中，在我的测试用例中输出以下内容：

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

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

为什么会这样？

Answer 1

您的浏览器将您的前端JavaScript代码限制为只能访问Cache-Control，Content-Language，Content-Type，Expires，Last-Modified和{{ 1}}响应标头，除非响应有一个Pragma响应标头，列出了浏览器也应该公开的其他标头名称。

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

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

同样，您的浏览器正在阻止您的代码进入这些代码。浏览器本身会获取所有响应标头，这就是您可以在浏览器devtools中看到它们的原因。但仅仅因为你可以看到它们并不意味着浏览器会将它们暴露给你的代码;浏览器只会公开Content-Length标题告诉它暴露的内容。