Set-Cookie response header not working using Angul

Question

I am developing an Angular 2 app that is using django-rest-framework a backend. I am doing my tests using a development server (ng serve from angular-cli) and another one for django (default from manage.py). Both server are accessible from 127.0.0.1 but on different ports.

My authentication system is based on cookie served by django-rest-framework. Everything works fine when using the views from django-rest-framework.

When I try to login from angular 2, I receive a valid response with a Set-Cookie Header. The problem is that the cookie is never set in the browser (tested in chrome and firefox).

Is this a CORS problem? I have corsheader app installed with the following parameters

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True

Answer 1

As I understand the django-cors (and basically cors in general) you can not set allow all and allow credentials at the same time, this is from cors middleware:

if conf.CORS_ORIGIN_ALLOW_ALL and not conf.CORS_ALLOW_CREDENTIALS:
            response[ACCESS_CONTROL_ALLOW_ORIGIN] = "*"
else:
    response[ACCESS_CONTROL_ALLOW_ORIGIN] = origin
    patch_vary_headers(response, ['Origin'])

So basically you need to have origin properly set - as you with both Trues goes to the else block;

You can read more about it, here: MDN CORS, especially this fragment:

"Important note: when responding to a credentialed request, server must specify a domain, and cannot use wild carding. The above example would fail if the header was wildcarded as: Access-Control-Allow-Origin: *. Since the Access-Control-Allow-Origin explicitly mentions http://foo.example, the credential-cognizant content is returned to the invoking web content. Note that in line 22, a further cookie is set. In case of failure, an exception, depending on the API used, is raised."