Angular5 WebApi token authorization not working

Question

I'm trying to implement token authorization for Angular5 client and WebApi server application. I have managed to create WebApi part of the project in question and when I try to get the token via "POSTMAN" I get a good response: Postman request and server answer

I'm trying to achieve the same with Angular5. This is my call from angular:

login(user: string, pass: string) {
    let params = new HttpParams()
        .append('grant_type', 'password')
        .append('username', user)
        .append('password', pass);
    let headers = new HttpHeaders()
        .set('Content-Type', 'application/x-www-form-urlencoded');
 return this._http.post<boolean>('auth', params, { headers: headers });
}

When I run this, I'm keep getting "bad request" from server.Chrome response

If anyone has any idea, I would appreciate help. Thanks in advance.

Answer 1

Thanks David for your help. I tried your solution but it didn't help until I changed my WebAPI CORS settings. The issue was with Pre-flight CORS request. I followed instructions in this article and that solved my issue.

In short:

1. I cleared all settings regarding CORS on my WebAPI and installed Microsoft.Owin.Cors package.

2. Then I modified the ConfigureAuth method in the App_Start\Startup.Auth.cs file with the following code:

   public void ConfigureAuth(IAppBuilder app) { app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
app.UseOAuthBearerTokens(OAuthOptions); }

That solved the issue, even with my code in Angular from the question. It now works fine.