HTTP Cookies and Ajax requests over HTTPS

Question

I know this has been asked before in various forms, but I can't seem to get around the problem. I have tried using both jQuery and the native JS API to make the Ajax requests.

My situation is the following (see attached diagram):

1. Browser makes HTTP request
2. Server responds and sets persistent Cookie
3. Browser makes HTTP Ajax request, Cookie is there alright
4. Server responds as expected, updates Cookie
5. Browser makes HTTPS Ajax request, Cookie is not there anymore (?!)
6. Server gives "default" response, since there is no Cookie (unintended behaviour)

Before anybody starts a lecture on cross-domain requests let me state a couple of things:

• I know that this is a cross-domain request (different protocol), and that's why the Server sets the Access-Control-Allow-Origin header in the response (and I am using Chrome and Firefox, both of which support CORS)
• What I also know, though, is that the HTTP cookie ought to be manageable over HTTPS (see here) since the host is the same
• (EDIT) The cookie is properly set for the general domain (e.g. .domain.ext) and neither the HttpOnly nor the Secure flags are set

So, why, why, why doesn't the browser pass on the cookie when making the HTTPS Ajax call? Any ideas? I am about to lose my mind...

     +-----------+ HTTP Request     +-----------+
     |Browser    |+---------------->|Server     |
     +-----------+                  +-----------+

                   HTTP Response
                  <----------------+
                   Set-cookie

                   Ajax HTTP Req.
                  +---------------->
                   Cookie (OK)

                   HTTP Response
                  <----------------+
                   Set-cookie (OK)

                   Ajax HTTPS Req.
                  +---------------->
                   No Cookie (!!!)

Answer 1

Document.cookie and Ajax Request does not share the cookie. Otherwise, ajax can't access the cookies from document.cookie or the response headers. They can only be controlled by the remote domain.

If you first get response including cookie from server by ajax, Since that you can request ajax communication with cookie to server.

For this case, you write such as below code ( jQuery )

 $.jajx({
        xhrFields : {
          withCredentials : true
        }
   });

See this article and demo

Answer 2

Ok, found the solution to the cookie problem.

See XHR specs, jQuery docs and StackOverflow.

The solution to have the cookies sent when switching protocol and/or subdomain is to set the withCredentials property to true.

E.g. (using jQuery)

 $.ajax( {
   /* Setup the call */
   xhrFields: {
     withCredentials: true
   }
 });