在JavaScript中怎么使用getAllResponseHeaders方法获取页面的Response Headers数据

Question

1、目前在学习AJAX,在跟着教程学习碰到一个问题，使用getAllResponseHeaders无法获取到页面的Response Headers数据。新手一枚，目前自学前端，有什么提问不恰当的，希望不要介意，谢谢大家。

2、出现的问题，console.log(this.getAllResponseHeaders())返回的结果如图所示

而教程中的结果是这样的：

以下是我的代码

<script>

    let xhr = new XMLHttpRequest();
    console.log(xhr.readyState);
    // ==>0
    // 表示初始化，请求代理对象

    xhr.open('get', 'http://localhost/time.php');
    console.log(xhr.readyState);
    // ==> 1
    // open 方法已经调用，建立一个与服务端特定端口的连接

    xhr.send();

    xhr.addEventListener('readystatechange', function () {
        // if (this.readyState !== 4) {
        //     return false;
        // }
        // console.log(this.responseText);
        // console.log(this.readyState);
        switch (this.readyState) {
            case 2:
                console.log(this.getAllResponseHeaders());
                console.log(this.responseText);
                // ==> 2
                // 已经接受到了响应报文的响应头
                break;
            case 3:
                console.log(this.readyState);
                break;
            case 4:
                console.log(this.readyState);
                break;
        }
    });

</script>

<?php

// 指定允许其他域名访问
header('Access-Control-Allow-Origin:*');
// 响应类型
header('Access-Control-Allow-Methods:PUT,GET,POST,HEAD,DELETE');
// 响应头设置
header('Access-Control-Allow-Headers:x-requested-with,content-type');

header('Access-Control-Expose-Headers:X-Pagination-Current-Page,Content-Type');


echo time();

3、请问如何操作才能达到教程中的效果呢？目前已经尝试搜索网站，但也没办法解决问题。因刚学习，一些网上查到的资料自己也看不太懂，希望能得到大家的帮助，谢谢大家了。

4、以下是我看过的相关资料：
https://segmentfault.com/q/10...
https://segmentfault.com/q/10...
https://blog.csdn.net/fdipzon...
http://www.ruanyifeng.com/blo...

Answer 1

这只取决于你服务端的响应。在这页面打开开发者工具，然后换成你这个segmentfault问题的url，你就看到和教程相似的结果。或者点开你有问题的页面，点开Network，你也能明白为什么你只有content-type。

Answer 2

这是我刚在网上看到的，IE模式下可以。那如果这个getAllResponseHeaders方法只能写使用，那么有什么办法可以让谷歌和火狐都能支持呢？教程中使用的是谷歌浏览器

Answer 3

默认情况下（如果你后端没有特别的配置），只显示6个简单的响应标头：

Cache-Control
Content-Language
Content-Type
Expires
Last-Modified
Pragma

IE可以显示更多，Chrome、Firefox不行可能是后两者严格遵守了这个约定而设置了安全策略。

你应该要在后端代码中设置类似expose_headers的值（expose意思是“暴露”，没设置默认可能就不暴露一些头信息了），最简单就是设置成*。
上面PHP代码中access-control-expose-headers就写了两个值，可以根据需求增加，或者使用*试试。