cookies not being sent over the server

I have a backbone app (residing on mywebsite.proj.io) that takes code sends it to the django server (authorization.proj.io) that exchanges the code for an access token (simple oauth exchange). I am using Chrome/49.0.2623.87.

The authorization.proj.io sends a cookie back to the client (mywebsite.proj.io) during the auth stage, but this cookie never gets sent back again on future requests. I do not think it is a cross domain cookie issue or a browser unable to set a cookie on a 302 redirect.

I would like to know why the cookie is not be sent to the server on subsequent requests.

Here are some details:

Step 1: Request Header.. Authentication Phase Request: Sending the Oauth 'code' from mywebsite.proj.io to the authorization.proj.io to get the access token. This request is through ajax. The cookie you see here may be from a previous request, but do not care at this point really

GET /fbauth/?code=fb_code_long_string&state=%7B%22client_id%22%3A34343642979%2C%22network%22%3A%22facebook%22%2
Host: authorization.proj.io
Referer: http://mywebsite.proj.io/contribute/?code=fb_code_long_string&state=%7B%22client_id%22%3A34343642979%2C%22network%22%3
Cookie: csrftoken=1MTginTGXLHAku5LMHAMLLTrQEX2M4jj; sessionid=igc8a7vidgbi8rzxgm7whgb5rh8uqxa9`

Step 2: Response Header.. Authentication Phase Response [authorization.proj.io responds with 302 and gets redirected to mywebsite.proj.io and sets cookie]

HTTP/1.0 302 FOUND
Server: WSGIServer/0.1 Python/2.7.10
Vary: Cookie
X-Frame-Options: SAMEORIGIN
Location: http://mywebsite.proj.io/contribute/#access_token=CAAE
Set-Cookie: csrftoken=g0BEHLD0HAH4vBQLQFpKOEn2andrYMhG; expires=Tue, 14-Mar-2017 22:00:16 GMT; Max-Age=31449600; Path=/
Set-Cookie: sessionid=igc8a7vidgbi8rzxgm7whgb5rh8uqxa9; expires=Tue, 29-Mar-2016 22:00:16 GMT; httponly; Max-Age=1209600; Path=/

Step 3: Later, js from mywebsite.proj.io sends a requests to authorization.proj.io.. No cookie is sent

GET /posts/gcc-speaker-training-on-april-25 HTTP/1.1
Host: authorization.proj.io
Connection: keep-alive
Accept: application/json, text/javascript, */*; q=0.01
Origin: http://mywebsite.proj.io
Authorization: Basic facebook:CAAEdTwh7fCMBAMEr6wC3ajZANVnZBMPenjseiNShjcXOJJ0PbiJ0GFXI7lSjzkP
DNT: 1
Referer: http://mywebsite.proj.io/contribute/

Solution

There were a few things I had to do to get this working.

It turns out that I was doing cross domain requests, and here is how I solved it:

1 : Ensure the server serving your pages has the Access-Control-Allow-Origin set.. I was using the http-server and did the following:

`http-server . --cors`

2 : I did the following for the ajax call

$.ajax('http://authorization.proj.io', {
    type: "GET",
    contentType: "application/json; charset=utf-8",
    success: function(data, status, xhr) {
      // do something;
    },
    error: function(jqxhr, textStatus, errorThrown) {
    console.log("cannot get orgs");
    },
    xhrFields: {
    withCredentials: true
    },
    crossDomain: true
});

Note the xhrFields and crossDomain.

3: I did the following in django settings.py:

CORS_ORIGIN_ALLOW_ALL = False
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = (
    'mywebsite.ngrok.io',
    'authorization.proj.io'
)

SESSION_COOKIE_DOMAIN=".proj.com"

I think the last bit was important so that the browser can send the cookie.. So perhaps not cross domain, but cross sub-domain.