cookie not stored on browser even if response contains 'Set-Cookie' header for ajax request

Question

cookie not stored on browser even if response contains 'Set-Cookie' header for ajax request.

Request code:

function hitLogin(){
        var loginUrl = "http://myapp:8080/login";

        var geturl;
        $.ajax({

            type: "GET",
            url : loginUrl,
            data:   {
            user : "user1",
            password : "encryptedPassword"              
            },              
            headers: {
                "credentials": 'include',
                "withCredentials" : true,
                "crossDomain": true,
                "X-Requested-With" : "XMLHttpRequest",
                "Content-type" : "application/x-www-form-urlencoded",
                "Accept":"text/plain",
            },              

            success : function(data)
            {                   
                alert("Ajax request data: "+data);
            },
            error: function( xhr, status, error ) 
            {
                alert("Ajax request error: "+status ); 
            }
        }); 
        }

Response headers received :

Access-Control-Allow-Credentials:true

Access-Control-Allow-Headers:X-Requested-With,accept,content-type,Cookie

Access-Control-Allow-Methods:POST,GET,PUT,OPTIONS,DELETE

Access-Control-Allow-Origin:http://myapp2.com:7011

Access-Control-Max-Age:3600

Content-Encoding:gzip

Content-Type:text/plain;charset=ISO-8859-1

Date:Wed, 06 Jun 2018 15:10:09 GMT

Server:Apache-Coyote/1.1

Set-Cookie:MYCOOKIE=62lml5_S7qS31KaFDg-SH-e8Ds5FPjljCIHzfmhxMAr8Fdrqr6fHLjI7s2XPAO2P3tNFLNLS1_fgvDXF4pLmfg#1s1S1#normal-false; Path=/; HttpOnly

Transfer-Encoding:chunked

Vary:Accept-Encoding

withCredentials:true

I can see the cookie stored in browser when same url hit from browser, but in case of ajax request, its not stored. Hence unable to send subsequent requests, which excepts this cookie.

Ilmari Karonen Ilmari Karonen · Accepted Answer · 2018-06-06T16:48:20

You are sending withCredentials: true as an HTTP header, which does nothing useful. You should instead set it as an XHR field. In jQuery, you can do that like this:

$.ajax({
    type: "GET",
    url: loginUrl,
    data: { /* request parameters here */ },
    headers: { /* custom HTTP headers here, if you need any */ },
    xhrFields: {
        withCredentials: true,
    },
    /* other AJAX settings here */
})

Also, all the other custom HTTP headers you're sending are actually useless, too:

credentials: include is neither a valid HTTP header, an XHR field nor a jQuery AJAX setting. Instead, it appears to be the Fetch API equivalent of jQuery's withCredentials: true. In any case, it's useless here.
crossDomain is also not an HTTP header. It can be used as a jQuery AJAX setting (i.e. outside the headers object) to force jQuery to treat the request as cross-domain even if the target URL appears to match the domain of the current page. In your case, it's also useless.
The X-Requested-With: XMLHttpRequest HTTP header is automatically added by jQuery, so specifying it as a custom header is 100% redundant.
There is no need to explicitly send an HTTP Content-Type header, since jQuery will automatically generate one. If you wish to specify which content type jQuery should use for the request, you should do so using the contentType setting outside headers. In any case, the one you've specified is the default.
Similarly, instead of sending a custom HTTP Accepts header, you should use the jQuery $.ajax() settings accepts and/or dataType to control which content types jQuery will accept in the response. And usually you won't need to, since the default values used by jQuery are fine unless your server is misconfigured and sends the wrong content type.

cookie not stored on browser even if response contains 'Set-Cookie' header for ajax request

2 Answers