angular2, http with credentials. Can't add cookies

Question

I Have been trying for some time to get past this problem. I need to connect to a remote server with my credentials, I am able to this with no problems. Next I need to perform a get for some resource on the server, from my experience in angular 1 I need to use the credentials I got from the login stage I just can't seem to get the right way to do it..

This is how I preform my login:

import { Injectable } from 'angular2/core';
import { IjobCard } from '../jobCard/jobCard';
import { Http, Response } from 'angular2/http';
import { Observable } from 'rxjs/Observable';
import { Icredentials } from './credentials';

@Injectable()
export class LoginService {
    private _loginUrl = 'MyUrl/Login';
    loginCred: Icredentials = {
        "filed1": "dummy1",
        "filed2": "dummy2", 
        "filed3": "dummy3"
    };

    constructor(private _http: Http){

    }

    login(): Observable<any>[] {
        return this._http.post(this._loginUrl, JSON.stringify(this.loginCred))
            .map((response: Response) => <any[]>response.json())
            .catch(this.handleError);

    }

    private handleError(error: Response){
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }
}

And this is how I am trying to execute my next get:

import { Injectable } from 'angular2/core';
import { IjobCard } from './jobCard';
import { Http, Response, Headers } from 'angular2/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class JobCardService {
    private _jobCardUrl = 'MyUrl/SomeGet';
    constructor(private _http: Http) {
    }

    getJobCard(): Observable<any>[] {
        var myHeders = new Headers();
        myHeders.append('Content-Type', 'application/json');
        return this._http.get(this._jobCardUrl, { headers: myHeders, withCredentials: true} )
        .map((response: Response) => <any[]>response.json())
        .catch(this.handleError);

    }

    private handleError(error: Response){
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }
}

Sadly, what I get back is an 401 unauthorised, I already tried many other methods based on the search result Google provides... no luck.

I was able to connect to the same service from an angular 1 app and by using postman...

*******UPDATE********

Ok, I tried following John Baird answer to my question but I couldn't make it work. But I got some new clues to what the problem could be:

• The server respose has the following headers:

  Access-Control-Allow-Credentials: true access-control-allow-headers: content-type, accept access-control-allow-methods: GET, POST, PUT, PATCH, DELETE, OPTIONS access-control-allow-origin: http://localhost:3000

• I also found out that in my angular 1 project the request to contains a header of cookie like so:

  Cookie: B1SESSION=GLWzfesg-sscK-yAH9-PH4m-99r5hCrOdddh; ROUTEID=.node0
  

  but my angular2 project did not, even when using the withCredentials flag.

• I tried solving it by following some ideas from : https://github.com/angular/angular/issues/4231 by adding this to my main:

  class MyBaseRequestOptions extends BaseRequestOptions {
      headers: Headers = new Headers({
          'X-Requested-With': 'XMLHttpRequest'
      });
      withCredentials: boolean = true;
  }
  
  bootstrap(AppComponent, [
      provide(RequestOptions, {useClass: MyBaseRequestOptions}) ]);
  

  but still no cookies are sent with my request.

Is this the right path? Any more ideas to try?

Answer 1

Okay, here's my call to get user settings after login. When you login, webapi2 returns a token which is good to authorize that user for any subsequent operations. You need to send that token as an Authorization header...

getSettingsData(userId: number): Observable<User> {
    var headers = new Headers();
    headers.append('Content-Type', this.constants.jsonContentType);
    var t = localStorage.getItem("accessToken");
    headers.append("Authorization", "Bearer " + t);


    return this.http.get(this.constants.userUrl + userId, { headers: headers })
      .map((response: Response) => <User>response.json())
      .catch(this.handleError);
  }

But your CORS error is where it gets tricky. I'm using WebApi 2 and there are a number of posts which deal with enabling CORS on IIS.... this one for example: Enable CORS in Web API 2

Answer 2

As Requested I supply the solution that worked for me. This is how I preform my login:

import { Injectable } from 'angular2/core';
import { IjobCard } from '../jobCard/jobCard';
import { Http, Response } from 'angular2/http';
import { Observable } from 'rxjs/Observable';
import { Icredentials } from './credentials';

@Injectable()
export class LoginService {
    private _loginUrl = 'MyUrl/Login';
    loginCred: Icredentials = {
        "filed1": "dummy1",
        "filed2": "dummy2", 
        "filed3": "dummy3"
    };

    private headers = new Headers({ 'Content-Type': 'application/json' });

    constructor(private _http: Http){

    }

    login(): Observable<any>[] {
        return this._http.post(this._loginUrl, JSON.stringify(this.loginCred), 
            { headers: this.headers, withCredentials: true })
            .map((response: Response) => <any[]>response.json())
            .catch(this.handleError);

    }

The change was is adding withCredentials and the header to the POST. I Haven't made any other changes to my, not even the ****UPDATE**** section it the question.

Answer 3

You can try this solution, it works for me

private getHeaders(){
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('Accept', 'application/json');
    return headers;
}

public getAll = (): Observable<Account[]> => {
    return this._http.get(this.actionUrl,{ headers: this.headers, withCredentials: true })
        .map((response: Response) => <Account[]>response.json())
        .catch(this.handleError);
}