Angular 2 Http with custom headers getting 405

Question

I've run into this issue with custom headers when trying to perform and Http GET request from angular 2. Preforming the same request from Postman works fine, however I get a following 405 error in Angular2:

OPTIONS http://[somehost.com]/api/v1/admin/account/singin 405 (Method Not Allowed)

The API has a GET operation where you pass a username and password in the header and it returns a 200 with a token in it's header. Here is an example of the code block I am using:

constructor (private http: Http) {

}

login (userName: string, password: string): Observable<any> {

  const endPointUrl = this.baseUrl + '/admin/account/singin';

  const headers = new Headers({
    'Accept': 'application/json',
    'X-Rem-Username': userName,
    'X-Rem-Password': password
  });

  const options = new RequestOptions({headers: headers});

  return this.http.get(endPointUrl, options)
    .map((response: Response) => {
      console.log(response);
      return response;
    });
}

As I mentioned, performing this request in Postman and in he WebStorm REST client with these headers works fine. If I remove these 'X-Rem' headers I get a 401, which is expected. Any help would be appreciated, thanks.

Answer 1

This is not problem with angular app. Your app and rest api server are different server/domain. You should configure cross domain allow in server. Whenever you request any api on server by web browser, it first check cross domain allow options by request a OPTION method. In postman api directly send, there is no cross domain.