Retrieving Cookie from Angular 2 Response

Question

Retrieving Cookie from Angular 2 Response

I am in need of assistance as I am struggling to retrieve the cookie from the response. Being new to tsc and ng2, I can't seem to find a solution.

Below is the ng2 http post method:

return this._http
    .post('http://demo...', body, { headers: headers })
    .subscribe(
        (response: Response) => {
            this.storeToken(response);
        }, (err) => {
            console.log('Error: ' + err);
        }
    );

This is the server's response:

HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With
Set-Cookie: JSESSIONID=A099CC4CA7A25DFBD12701630A7DC24C; Path=/pbcp/; HttpOnly
Content-Type: application/json;charset=UTF-8
Transfer-Encoding: chunked
Date: Fri, 17 Feb 2017 04:08:15 GMT

32
{"status":"OK","message":"User is Authenticated."}
0

I'm puzzled because I can't locate it within the headers array...

Result of console.log(response)

https://i.sstatic.net/hPu2U.png

Result of console.log(response.headers)

https://i.sstatic.net/hPu2U.png

...however, it appears in the cookies section.

https://i.sstatic.net/hPu2U.png

Your help is greatly appreciated!

angular typescript cookies

Answer 1

Answer №1

Upon conducting some research, I managed to identify two issues on my end.

To start with, the cookie was actually set correctly, but I was mistakenly searching for it in the wrong location. All along, I had been looking for it under my localhost:3000 domain, when in fact the cookie was properly stored under the http://demo... domain, which is the expected behavior. I located it by navigating to chrome://settings/ ==> Show advanced settings ==> All cookies and site data... ==> and filtering by the remote host as shown below:

https://i.sstatic.net/11AzK.png

Secondly, I overlooked including withCredentials: true in the remaining request headers as well, which would have allowed for automatic inclusion and acceptance of the cookie.

authenticate(username: string, password: string) {
    var body = `{"username":"${username}","password":"${password}"}`;
    var headers = new Headers();
    headers.append('Content-Type', 'application/json');
    let options = new RequestOptions({ headers: headers, withCredentials: true });

    return this._http
               .post('http://demo...', body, options)
               .subscribe(
                   (response: Response) => {
                       this.doSomething(response);
                   }, (err) => {
                       console.log('Error: ' + err);
                   });
}

I extend my gratitude to @All for their valuable responses and time!

Answer 2

Upon conducting some research, I managed to identify two issues on my end.

To start with, the cookie was actually set correctly, but I was mistakenly searching for it in the wrong location. All along, I had been looking for it under my localhost:3000 domain, when in fact the cookie was properly stored under the http://demo... domain, which is the expected behavior. I located it by navigating to chrome://settings/ ==> Show advanced settings ==> All cookies and site data... ==> and filtering by the remote host as shown below:

https://i.sstatic.net/11AzK.png

Secondly, I overlooked including withCredentials: true in the remaining request headers as well, which would have allowed for automatic inclusion and acceptance of the cookie.

authenticate(username: string, password: string) {
    var body = `{"username":"${username}","password":"${password}"}`;
    var headers = new Headers();
    headers.append('Content-Type', 'application/json');
    let options = new RequestOptions({ headers: headers, withCredentials: true });

    return this._http
               .post('http://demo...', body, options)
               .subscribe(
                   (response: Response) => {
                       this.doSomething(response);
                   }, (err) => {
                       console.log('Error: ' + err);
                   });
}

I extend my gratitude to @All for their valuable responses and time!

Answer 3

Answer №2

It seems like you are utilizing the angular2 http module to communicate with the server, which will provide an observable containing the server's response.

If you want to access the response, you can subscribe to it:

//...
http.post(...your content...)
 .take(1) // optionally, you can specify a number to take before terminating the subscription 
 .subscribe(response =>{
      console.log(response);
    // It is likely that "response.headers" includes the desired "Set-Cookie"
 });

You can also convert the observable into a Promise:

http.post(...your content...)
  .toPromise()
  .then(response=>{
     console.log(response);
     let headers = response.headers;
     console.log(headers);
  })
  .catch(err=>console.log(err));

In some cases, you may need to use response.json() to retrieve an object from the response.

I hope this explanation helps. If you need more guidance, please provide additional details, and I'll do my best to assist you further.

Answer 4

It seems like you are utilizing the angular2 http module to communicate with the server, which will provide an observable containing the server's response.

If you want to access the response, you can subscribe to it:

//...
http.post(...your content...)
 .take(1) // optionally, you can specify a number to take before terminating the subscription 
 .subscribe(response =>{
      console.log(response);
    // It is likely that "response.headers" includes the desired "Set-Cookie"
 });

You can also convert the observable into a Promise:

http.post(...your content...)
  .toPromise()
  .then(response=>{
     console.log(response);
     let headers = response.headers;
     console.log(headers);
  })
  .catch(err=>console.log(err));

In some cases, you may need to use response.json() to retrieve an object from the response.

I hope this explanation helps. If you need more guidance, please provide additional details, and I'll do my best to assist you further.

Retrieving Cookie from Angular 2 Response

Answer №1

Answer №2

Similar questions

Tips for incorporating drop-down arrow states into a Bootstrap 4 accordion with Angular or CSS

Unnecessary Attributes in Type that Should be Automatically Inherited by Child Component

An issue has been identified with the NGX-chart timeline not displaying correctly when dynamically loading a component using ComponentPortal in Angular 8

What is the best approach to inheriting from an Injectable class with multiple Injections in Angular 2?

Taunting a specific occurrence inside a group

Different property 'responseType' types are not compatible

What is the best way to clear the parent component's content from the child component in Angular?

What is the relevance of `type Constructor<T> = Function & { prototype: T }` in relation to Abstract constructor types in TypeScript?

Type aliases using generics may demonstrate varying behaviors from type aliases without generics

Transform a javascript object with class attributes into a simple object while keeping the methods

What is the best way to instantiate objects, arrays, and object-arrays in an Angular service class?

Angular 4 encounters a hiccup when a mistake in the XHR request brings a halt to a

The Ionic mobile application is functioning properly during the development stage, however, it is encountering issues

Angular 2 form validation allowing submission to continue despite tag errors

Ways to simulate a service using get() method with a particular data structure

Retrieve the component when there is a change in the variable in Angular versions greater than 4

Comparing object keys in JavaScript for property values

Error Message: An issue has occurred with the server. The resolver function is not working properly in conjunction with the next

Element not recognized: <my-company-form-extra> - have you properly registered this component?

Angular8 with the [tinymce] library for customizing editor elements and configuring multiline options