Angular 5 - Cookie is set although (Set-Cookie) is in the response header

Question

For an Angular 5 app, I have an auth service that does a HTTP POST which returns the session cookie (CORS) as shown below in the code below:

signIn(signInRequest: SignInRequest): Observable<SignInResponse> {
   let headers: Headers = new Headers();   
   headers.append('Content-Type','application/json');  
   return this.http
              .post("/login", {email:  signInRequest._email,password:signInRequest._password}, { headers: headers, withCredentials: true })
  .map(this.extractData)
  .catch(this.handleErrorObservable);}

The response of the header contains the set-cookie as shown below:

and the request header is the following:

I know that the browser should be setting the cookie response. Why is it not doing it?

Answer 1

Your frontend is hosted on localhost:4200 and your backend is hosted on api.safra.me. By default, your browser won't send the cookies along the request unless you use the withCredentials in the login request as you already did, and all of the subsequent requests.