Trying to get session from http response in Angular 2
<p>I have an Angular 2 app which runs on port 8000 on the lite server. My express app (back-end) runs on port 3000.</p>

<p>When I send my credentials to the back-end which runs on port 3000, then I can see that I had succesfully logged in on port 8000. But I don't get a session as a response from the back-end. Here is a screenshot of it link: </p>

<p><a href="https://i.stack.imgur.com/Mojmj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Mojmj.png" alt="enter image description here"></a></p>

<p>As you can see the response says <code>Session not found</code>.</p>

<p>And when I succesfully log in on port 3000. Then I do get a session as response from the back-end. Here is a screenshot of it link: </p>

<p><a href="https://i.stack.imgur.com/2OhL0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2OhL0.png" alt="enter image description here"></a></p>

<p>Also here is a screenshot of logging in on port 3000 through Postman (Rest client) link: </p>

<p><a href="https://i.stack.imgur.com/6qtNE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6qtNE.png" alt="enter image description here"></a>
And here is a screenshot of getting a session as a response on port 3000 link:</p>

<p><a href="https://i.stack.imgur.com/mWAS4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mWAS4.png" alt="enter image description here"></a></p>

<p>So now I can conclude that there is no problem at the back-end.</p>

<p>My question is: how can I also get the session as a response on port 8000?</p>

<p>Here is my code:</p>

<p>app.component.ts:</p>

<pre><code>export class AppComponent {
    //On page refresh the constructor gets called
    constructor(private _userService: UserService) {

        this._userService.getSession()
            .subscribe(
                res =&gt; {
                    console.log("app session ");
                    //log the response which shows a session
                    console.log(res); 
                },
                error =&gt; {
                    console.log("app session error");
                    console.log(error);
                }
            );
    }
}
</code></pre>

<p>login.component.ts:</p>

<pre><code>export class LoginComponent {
    user: User = new User();
    loginRes: String;
    private toasterService: ToasterService;

    public toasterconfig: ToasterConfig = new ToasterConfig({
        showCloseButton: true,
        tapToDismiss: false,
        timeout: 0
    });

    constructor(private _userService: UserService, toasterService: ToasterService, private router: Router) {
        this.toasterService = toasterService;
    }

    data = {};
    onSubmit() {
        this._userService.login(this.user)
            .subscribe(
                //we are using an arrow function here
                res =&gt; {            
                    this.toasterService.pop('success', 'Success', 'You have logged in ' + res.username);
//                  I don't use navigate(), because I want a redirect where the page gets refreshed
//                  this.router.navigate(['/']); 
                    var host = location.host;
                    console.log("host");
                    console.log(host);
                    //redirects where the page also gets refreshed
                    window.location.href = "http://"+ host;
                },
                error =&gt; {
                     this.toasterService.pop('error', 'Failed', error._body);
                }
            );
    }
}
</code></pre>

<p>user.service.ts:</p>

<pre><code>@Injectable()
export class UserService {
    private url: string;

    constructor(private _http: Http) {

    }

    login(user: User) {
        this.url = config.getEnvironmentVariable('endPoint')+'api/auth/login';
        let data = { "username": user.username, "password": user.password };
        let body = JSON.stringify(data);
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });

        console.log("login url " + this.url);
        return this._http.post(this.url, body, options)
            .map(this.extractData)
            .catch(this.handleError);
    }

    getSession() {
        this.url = config.getEnvironmentVariable('endPoint')+'api/auth/';
        console.log("session url " + this.url);
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });
        options.body = '';

        return this._http.get(this.url, options)
            .map(this.extractData)
            .catch(this.handleError);
    }

    private extractData(res: Response) {
        let body = res.json();
        return body || {};
    } 

    private handleError(error: any) {
        //the Observable catches and throws an error
        return Observable.throw(error.message || error);
    }
}
</code></pre>