Angular 2 calling ASP.NET WebAPI

Question

I am trying to call a WebAPI using Angular but running into a credential not authorized issue. It works fine in IE but in Chrome and FF (401 unauthorized), the credentials are not forwarded.

I think the solution is to add the default credential into the call in Angular, but I am not sure how to do it or maybe there is some other solution.

Angular calls

import {Http} from 'angular2/http';
import {Injectable} from 'angular2/core';
import 'rxjs/Rx';

@Injectable()
export class MyListService{

    constructor(private _http: Http) { }

    getMyList() {
    //return an observable
    return this._http.get('http:////localhost:2311/api/MyListApi')

        .map((response) => {
            return response.json();
        });
        //.retry(3);

    }

}

score 0 · Answer 1 · answered May 11 '16 at 08:41

0

You can try this way:

return this._http.get('http:////localhost:2311/api/MyListApi', {
        credentials: RequestCredentialsOpts.Include
    }).map((response) => {
            return response.json();
        });
    }

Looks like a recent fix for Angular2. You can also check this answer.

answered May 11 '16 at 08:41

Luca Ghersi

3,261
18
32

It looks like you can only specify url, method, search, headers and body in [RequestOptionsArgs](https://angular.io/docs/ts/latest/api/http/index/RequestOptionsArgs-interface.html). I am running angular2 2.0.0-beta.17 in my environment. I can't be the only one with this issue? – wirble May 11 '16 at 17:48
mmm have you checked this: https://stackoverflow.com/questions/32905399/angular-2-http-request-does-not-send-credentials?lq=1 maybe can give you some help. – Luca Ghersi May 12 '16 at 11:30
Patched recently so you can use withCredentials, true in the call. Watch out for CORS needs if running over different server/ports – Matrim Aug 19 '16 at 12:22

score 0 · Answer 2 · answered Aug 26 '16 at 18:35

I was having this issue as well. My Angular2-rc4 app calls a .NET Core 1.0.0 WebAPI app on another domain.. posting this in case it may help others.

As mentioned by others, in Angular2 pass withCredentials true:

getUser() {
    return this.http.get(this._apiUrl + "/account/GetUser", { withCredentials: true })
        .toPromise()
        .then(response => response.json().data)
        .catch(this.handleError);
}

In your WebAPI project you can set CORS policies in Startup.cs (instead of web.config):

public void ConfigureServices(IServiceCollection services)
{
    var corsBuilder = new CorsPolicyBuilder();
    corsBuilder.AllowAnyHeader();
    corsBuilder.AllowAnyMethod();
    corsBuilder.AllowAnyOrigin();
    corsBuilder.AllowCredentials();
    services.AddCors(options =>
    {
        options.AddPolicy("AllowAll", corsBuilder.Build());
    });
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    app.UseCors("AllowAll");
}

Of course, set your policies based on your app's needs, this just allows all for testing. Example here and official .NET Core docs here provide more details.

Angular 2 calling ASP.NET WebAPI

2 Answers2

Linked