cookie disappeared in AngularJS app using Django and CORS

Question

I'm building an AngularJS app with Django Rest Framework and Django CORS Headers as backend API.

Everything was working fine until today. Suddenly the csrfcookie and sessionid cookie stopped showing up in Chrome.

I see the API responding to me with the csrfcookie. Chrome doesn't show it in dev tools, however I see it in chrome://settings/cookies.

AngularJS

$httpProvider.defaults.useXDomain = true;
$http.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
$http({withCredentials: true, ...})

Django API

CORS_ALLOW_CREDENTIALS = True

CORS_ALLOW_HEADERS = (
    'x-requested-with',
    'content-type',
    'accept',
    'origin',
    'authorization',
    'X-CSRFToken'
)

Hi, yes I cleared all cookies, several times. If i refresh the browser after clearing all cookies I see the csrfcookie again in chrome://settings/cookies, but not in dev tools. AngularJS does not recognize any cookies in the $cookies object. — JoakimB
– JoakimB, Commented Aug 15, 2013 at 13:33
Is it possible you accidentally made partial rules to cookies in your browser settings? Also have to ask. — Dan Kanze
– Dan Kanze, Commented Aug 15, 2013 at 13:35
No. I have not added any exceptions or similiar settings. I fully allow cookies and they show up fine from other sites. — JoakimB
– JoakimB, Commented Aug 15, 2013 at 13:39

JoakimB · Accepted Answer · 2013-08-20 08:39:34Z

1

Ok so the answer to this issue is quite simple but not always very easy to notice since there are no error messages from the API, nor the client.

enter image description here

The problem above is that I reside on domain.com in my browser, but my request is towards the API is to "www.domain.com:8000". Both www.domain.com and domain.com are allowed origins in my API.

Conclusion here is that if I reside on domain.com then I need to make my API request towards domain.com:8000. But if reside on www.domain.com in my browser, then I need to make my API request towards www.domain.com:8000.

Se a working example down bellow:

enter image description here

Cookies now appear fine!

I hope this helps anyone, saving a few hours of frustration :)

Update: Enabling the following settings in the Django settings file will also solve the problem. Using them let's you reside on different subdomains in your browser, and the cookies will return for domain ".domain.com"

https://docs.djangoproject.com/en/dev/ref/settings/#csrf-cookie-domain https://docs.djangoproject.com/en/dev/ref/settings/#session-cookie-domain

Thanks to apollo on irc.freenode.net, #django for the updated answer.

edited Aug 20, 2013 at 8:39

answered Aug 19, 2013 at 11:07

JoakimB

1,2062 gold badges14 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3441799 Over a year ago

Could you tell me with this example.. I'm also facing this error,,

user3441799 Over a year ago

My Browser Side MAMP->192.*.*.*.21:8888/SessionCheck.html , API Server -> 192.*.*.21:8000/api/Login/ Both IP address same with diff port no..though i am using CORS i couldnt set my cookie in brower storage.. What i missed here

Collectives™ on Stack Overflow

cookie disappeared in AngularJS app using Django and CORS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related