Cookie not being set on angular client

user_1109919 0
Viewed 8619

I have a backend app in django python and it is being served on http://localhost:8000.

I have a angular frontend which is being served on http://localhost:4200.

I have disabled CORS on django. On hitting the login api on http://localhost:8000/auth/login/, I am getting a valid response along with the Set-Cookie header. enter image description here

Here is my angular code to print the cookies:

  this.http.post<any>('http://localhost:8000/auth/login/', this.LoginForm, { observe: 'response' }).subscribe(response => {
   console.log("response is ", response);
   var cookies = this.cookieService.getAll();//('cookies');
   console.log("cookies is :", cookies);

It prints an empty object on console. How do I make this work? I want to use cookies for authentication.

angular cookies django
2 Answers

You are trying to set cross domain cookies, which will not work straight away. There are a few steps to follow to be able to do that.

  1. Set withCredentials: true when making the authentication request from angular

    this.http.post<any>('http://localhost:8000/auth/login/', this.LoginForm, { observe: 'response', withCredentials: true })

  2. Configure your server to return the following CORS headers: Access-Control-Allow-Credentials: true and Access-Control-Allow-Origin: http://localhost:4200

Note

One of the cookies that you are setting is HttpOnly. As such, you cannot access it from Javascript (see documentation).

You may not need to access the cookies with JS anyway. If you just want to send the cookies in the next API requests, just pass withCredentials: true to HttpClient other api calls

this.http.get('http://localhost:8000/path/to/get/resource',
  { withCredentials: true }).subscribe(response => {
user_11607940

Set-Cookies:

In the example in the Question, both client and server are in the same domain, localhost. On deployment, this may not be the case. Let us assume the domains as below,
  • Client : client1.client.com
  • Server: server1.server.com

A http request from the Angular web app in client1.client.com to https://server1.server.com/api/v1/getSomething has Set-Cookie: JSESSIONID=xyz in the response header. The cookie will be set on server1.server.com and NOT on client1.client.com. You can enter server1.server.com in the URL bar and see the cookie being set.

withCredentials:

There is no need for the angular app to read the cookie and send it in the following requests. withCredentials property of http request can be used for this. Refer: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials

Example:

public getSomething(): Observable<object> {
    const httpOptions = {
      withCredentials: true
    };
    return this.http.get(`${this.serverUrl}/getSomething`, httpOptions);
  }

Refer: https://angular.io/api/common/http/HttpRequest

withCredentials will set the cookies from the server's domain in the requests to the server.

As mentioned before Set-Cookie: JSESSIONID=xyz in the response from server1.server.com will be set in server1.server.com. The Angular app in client1.client.com need not read it. withCredentials will take care of it.

cross domain issues:

When the server and client are in different domains, using withCredentials may not work in all browsers, as they are considered as third party cookies.

In my recent testing on May 2020, I found that withCredentials is not working in certain browsers when the client and server are in different domains.

enter image description here

Same domain:

Looks like mainstream browsers are moving to block third-party cookies.

The solution is to have both the client and server in the same domain.

  • Client: client1.myapp.com
  • Server: server1.myapp.com

And in the Set-Cookie response include the root domain too. Example: "JSESSIONID=xyz; Domain=.myapp.com; Path=/"

This will make sure the cookies are set in all cases.

user_67789690
Related