Angular 2 HTTP Post on Web API 2 - Bad Request

Question

I am trying to call web api authentication using angular 2 as below. But I am getting error

"Failed to load resource: the server responded with a status of 400 (Bad Request)"

The authentication service is running on local IIS server.

Anything missing here?

import { Injectable } from '@angular/core';
import {Http, Response, RequestOptions, Request, RequestMethod, Headers, HttpModule} from '@angular/http';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';



@Injectable()
export class AuthService {
    public token: string;

    constructor(private http: Http) {
        var currentUser = JSON.parse(localStorage.getItem('currentUser'));
        this.token = currentUser && currentUser.token;
    }

    login(username, password): Observable<boolean> {
        var authObj = {
            username: username, Password: password, grant_type : 'password'
        }

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

        return this.http.post('http://localhost/Authentication/oauth/Token', JSON.stringify({ username: username, Password: password, grant_type: 'password' }), options)
            .map((response: Response) => {

                let token = response.json() && response.json().token;

                if (token) {
                    //set the token property 
                    this.token = token;
                    //user username and jwt token in local storage to keep user loggen in between page refreshes
                    localStorage.setItem('currentUser', JSON.stringify({ username: username, token: token }));
                    //return true to indicate the successful login
                    return true;
                } else {
                    //return false to indicate failed login
                    return false;
                }
            });
        }

    logout(): void {
        this.token = null;
        localStorage.removeItem('currentUser');
    }
}

Can't you debug the application to see what kind of exception or error the api is generating. It seems to me that your API is responding with some errors. Step-Wise debugging would be a nice idea. Also can you post your API code? — Abhinandan
this might be due to unmatched request body. just check what is being expected & what you are sending. might be, there would be any parameter missing or it would be expecting body as Object not string. — manish.nith
Try adding exact port next to localhost where your webapi is running — Sanket
@user32 you are right , I am sending JSON string while the API expecting url encoded parameters. Fixed that and it's working fine. — Alan B
Is it fixed. I'm looking for this solution. there is 400 bad request for me too when i'm sending request from angular2 httpservice. it is working fine when using postman. — LOKI

Rahul Shakya Rahul Shakya · Accepted Answer · 2017-01-03T05:46:21

try with this -

let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });

Angular 2 HTTP Post on Web API 2 - Bad Request

1 Answers