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);
}
}
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.
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.
