How Do I Retrieve Cookie from XMLHttpRequest?

Question

I have a javascript code to get username from a php file. The javascript code is not in the same domain, so it is cross-domain. In this case, domain1.com want to retrieve user information from domain2.com by using XMLHttpRequest. Here is the code

var http = new XMLHttpRequest();
http.open("POST", linkbased+'/username/', true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.onreadystatechange = function() {
    if(http.readyState == 4 && http.status == 200) {
        document.getElementById("username").innerHTML = http.responseText;
    }
}
http.send(data);

Here is my php file code

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST');
echo $_COOKIE['username'];
?>

If I access the php code directly, it will show the username. However, if I access it via XMLHttpRequest. It won't read the username. Is there something part am I missing?

See the answer at https://stackoverflow.com/questions/14462423/cross-domain-post-request-is-not-sending-cookie-ajax-jquery/14472492#14472492 — sideshowbarker, Jun 24 '17 at 09:29
An XHR sends cookies the same as a browser load would, assuming same origin. I'd suggest using `http.addEventListener('load', x => ...)` instead of _onreadystatechange_, and adding a log to see what `http` looks like in that handler — Paul S., Jun 24 '17 at 09:30
@PaulS. Could you please to provide the sample code which uses addEventListener. I never use it before. — Bobby, Jun 24 '17 at 09:36

Professor Abronsius · Answer 1 · 2017-06-24T10:12:03.527

From MDN

Credentialed requests

Credentialed Access Control Requests – that is, requests that are accompanied by Cookies or HTTP Authentication information (and which expect Cookies to be sent with responses) – can be either Simple or Preflighted, depending on the request methods used.

In a Simple Request scenario, the request will be sent with Cookies (e.g. if the withCredentials flag is set on XMLHttpRequest). If the server responds with Access-Control-Allow-Credentials: true attached to the credentialed response, then the response is accepted by the client and exposed to web content. In a Preflighted Request, the server can respond with Access-Control-Allow-Credentials: true to the OPTIONS request.

So you might need to alter your code - the below is not tested however

var http = new XMLHttpRequest();
http.withCredentials = true;
http.onreadystatechange = function() {
    if(http.readyState == 4 && http.status == 200) {
        document.getElementById("username").innerHTML = http.responseText;
    }
}

http.open("POST", linkbased+'/username/', true);
http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
http.send( data );




if( $_SERVER['REQUEST_METHOD'] == "POST" ) {

    if( $_SERVER['HTTP_ORIGIN'] == 'http://domain1.com' ){
        header('Access-Control-Allow-Origin: http://domain1.com');
        header('Access-Control-Allow-Methods: GET, POST');
        header('Access-Control-Allow-Credentials: true');
        header('Content-Type: text/plain');

        echo array_key_exists( 'username', $_COOKIE ) ? $_COOKIE['username'] : 'username not set';

    } else {
        header('HTTP/1.1 403 Access Forbidden',true,403);
        header('Content-Type: text/plain');
        echo "Sorry, you are not allowed to make such a request";
    }
}

it is still can not read the cookie, only show "username not set". When I access it directly, it shows the username. — Bobby, Jun 24 '17 at 10:32
I changed domain1.com with my own domain as the cookie was saved there. — Bobby, Jun 24 '17 at 12:00
and... has that done the trick or still not getting the result you would expect? — Professor Abronsius, Jun 24 '17 at 12:32
yeah, I just want to get the cookie from XMLHttpRequest and show the username in a different domain as a widget. The cookie works fine if it is in the same domain but if its cross-domain. It won't work. — Bobby, Jun 24 '17 at 15:45

How Do I Retrieve Cookie from XMLHttpRequest?

1 Answers1

Credentialed requests