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

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
   }
 });