带有自定义标头的Angular 2 Http获得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

Try this

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

this.http.get('url', {headers: headers})

Answer 2

I am not sure but you can try add this header:

  "Access-Control-Expose-Headers" : "Authorization"

I found it in this discussion

Answer 3

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.