在JavaScript中怎么使用getAllResponseHeaders方法獲取頁(yè)面的Response Headers數(shù)據(jù)

1、目前在學(xué)習(xí)AJAX,在跟著教程學(xué)習(xí)碰到一個(gè)問(wèn)題，使用getAllResponseHeaders無(wú)法獲取到頁(yè)面的Response Headers數(shù)據(jù)。新手一枚，目前自學(xué)前端，有什么提問(wèn)不恰當(dāng)?shù)模Ｍ灰橐?，謝謝大家。

2、出現(xiàn)的問(wèn)題，console.log(this.getAllResponseHeaders())返回的結(jié)果如圖所示

而教程中的結(jié)果是這樣的：

以下是我的代碼

<script>

    let xhr = new XMLHttpRequest();
    console.log(xhr.readyState);
    // ==>0
    // 表示初始化，請(qǐng)求代理對(duì)象

    xhr.open('get', 'http://localhost/time.php');
    console.log(xhr.readyState);
    // ==> 1
    // open 方法已經(jīng)調(diào)用，建立一個(gè)與服務(wù)端特定端口的連接

    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
                // 已經(jīng)接受到了響應(yīng)報(bào)文的響應(yīng)頭
                break;
            case 3:
                console.log(this.readyState);
                break;
            case 4:
                console.log(this.readyState);
                break;
        }
    });

</script>

<?php

// 指定允許其他域名訪(fǎng)問(wèn)
header('Access-Control-Allow-Origin:*');
// 響應(yīng)類(lèi)型
header('Access-Control-Allow-Methods:PUT,GET,POST,HEAD,DELETE');
// 響應(yīng)頭設(shè)置
header('Access-Control-Allow-Headers:x-requested-with,content-type');

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


echo time();

3、請(qǐng)問(wèn)如何操作才能達(dá)到教程中的效果呢？目前已經(jīng)嘗試搜索網(wǎng)站，但也沒(méi)辦法解決問(wèn)題。因剛學(xué)習(xí)，一些網(wǎng)上查到的資料自己也看不太懂，希望能得到大家的幫助，謝謝大家了。

4、以下是我看過(guò)的相關(guān)資料：
https://segmentfault.com/q/10...
https://segmentfault.com/q/10...
https://blog.csdn.net/fdipzon...
http://www.ruanyifeng.com/blo...