How to use the getAllResponseHeaders method to get the ResponseHeaders data of a page in JavaScript

1, currently learning AJAX, encountered a problem in following the tutorials, using getAllResponseHeaders can not get the ResponseHeaders data of the page. A novice, the current self-study front-end, what questions are inappropriate, I hope you do not mind, thank you.

2. If there is a problem, console.log (the result returned by this.getAllResponseHeaders ()) is shown in the figure

:

).

here is my code

<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. What can I do to achieve the effect in the tutorial? So far, we have tried to search the website, but there is no way to solve the problem. Because I have just studied, I can"t understand some of the information found on the Internet. I hope I can get your help. Thank you.

4, Here are the relevant materials I have seen:
https://codeshelper.com/q/10.
https://codeshelper.com/q/10.
https://blog.csdn.net/fdipzon.
http://www.ruanyifeng.com/blo.

Apr.05,2021

it only depends on the response of your server. Open the developer tool on this page, then change it to url of your codeshelper question, and you will see a result similar to that of the tutorial. Or click on the page where you have a problem, click Network , and you can see why you only have content-type .


this is what I just saw on the Internet and can be done in IE mode. So if this getAllResponseHeaders method can only be written and used, is there any way for both Google and Firefox to support it? Google browser


is used in the tutorial.

by default (if your backend does not have a special configuration), only six simple response headers are displayed:

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

IE can show more, but Chrome and Firefox may not work because the latter two strictly abide by this convention and set the security policy.

you should set a value similar to expose_headers in the backend code (expose means "expose". If you don't set it by default, you may not expose some header information). The easiest thing to do is to set it to * .
there are two values written in access-control-expose-headers in the PHP code above, which can be increased as needed, or try using * .

Menu