Set-cookie in response not set for Angular2 post request

Question

When I make a put request in Angular2, I receive the expected set-cookie in the response. However my browser (tried both Chrome and Firefox) refuses to set the cookie.

Instead when I use an Angular 1 app making a call to the same API endpoint, the cookies are set correctly.

The response headers are:

Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin:http://example.com
Allow:GET, PUT, HEAD, OPTIONS
Content-Type:application/json
Date:Thu, 28 Jan 2016 14:41:38 GMT
P3P:policyref="http://www.example.com/p3p.xml", CP="NON DSP COR CURa TIA"
Server:WSGIServer/0.1 Python/2.7.6
Set-Cookie:sessionid=994wl49qfsizog5bqmt57sgx9q2toa25; expires=Mon, 28-Mar-2016 14:41:37 GMT; Max-Age=5183999; Path=/
Set-Cookie:csrf=u7UQhpAphTsGYKRU6jFlLFt6NoYAhNMS; Domain=api.example.com; expires=Thu, 26-Jan-2017 14:41:38 GMT; Max-Age=31449600; Path=/
Vary:Accept, Cookie

The backend is programmed in Django 1.8.

Does anyone experienced the same thing or have a suggestion how to solve this problem?

maxbellec · Accepted Answer · 2016-08-09 14:27:15Z

20

Indeed a CORS issue. From Angular2 RC2 on, you just need to

this.http.get('http://my.domain.com/request', { withCredentials: true })

answered Aug 9, 2016 at 14:27

maxbellec

17.7k10 gold badges38 silver badges44 bronze badges

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

2 Comments

haja Over a year ago

coresponding angular 2 docs: angular.io/docs/ts/latest/api/http/index/…

HammerN'Songs Over a year ago

Note for anyone like me who read that too quickly here and everywhere else it's advised - that's just a setting that Angular uses, and is given as an attribute of the same object you use to pass in headers. It's not a header itself.

Community · Accepted Answer · 2017-05-23 12:34:32Z

12

I seems to be a CORS-related issue. Perhaps you could try to set the withCredentials attribute when executing the HTTP request.

This answer could help you to find out how to do that, especially the Cedric Exbrayat's answer:

angular2 xhrfields withcredentials true

Edit

You could extend the BrowserXhr:

@Injectable()
export class CustomBrowserXhr extends BrowserXhr {
  constructor() {}
  build(): any {
    let xhr = super.build();
    xhr.withCredentials = true;
    return <any>(xhr);
  }
}

and override the BrowserXhr provider with the extended:

bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  provide(BrowserXhr, { useClass: CustomBrowserXhr })
]);

If you need more hints about CORS, you could have a look at this link: http://restlet.com/blog/2015/12/15/understanding-and-using-cors/.

Hope it helps you, Thierry

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered Jan 28, 2016 at 14:52

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

4 Comments

Bas van Dijk Over a year ago

Thanks! But for me it is not very clear where I have to put Cedric's code :)

Thierry Templier Over a year ago

I think the Cédric's code should put before the call of the bootstrap function. I also provides you another way that should work but I didn't test it...

Bas van Dijk Over a year ago

I've ended up by putting it in the constructor of my api service. Thanks! :)

Aarmora Over a year ago

@osi Could I see an example of how you did this?

Simon Ludwig · Accepted Answer · 2017-07-29 11:51:17Z

1

I had the same problem but for me the cookie had a path to '/api/order'.. So only request to this path contained the cookie.. I altered the path to '/' and now everthig is fine..

answered Jul 29, 2017 at 11:51

Simon Ludwig

1,8341 gold badge23 silver badges30 bronze badges

Collectives™ on Stack Overflow

Set-cookie in response not set for Angular2 post request

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related