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.

Add X-Rem-Username and X-Rem-Password to your CORS response header Access-Control-Allow-Headers.. assuming you already have CORS set up on your server. — Paul Samsotha
– Paul Samsotha, Commented Apr 23, 2017 at 9:09

Jorawar Singh · Accepted Answer · 2017-04-23 09:02:16Z

1

Try this

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

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

answered Apr 23, 2017 at 9:02

Jorawar Singh

7,6414 gold badges29 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kishan Mundha · Accepted Answer · 2017-04-23 08:53:21Z

0

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.

answered Apr 23, 2017 at 8:53

Kishan Mundha

3,15120 silver badges26 bronze badges

1 Comment

Joofville Over a year ago

Thanks guys, ended up being CORS not properly setup on the API side.

Leguest · Accepted Answer · 2017-04-23 07:32:05Z

0

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

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

I found it in this discussion

answered Apr 23, 2017 at 7:32

Leguest

2,1372 gold badges18 silver badges20 bronze badges

Collectives™ on Stack Overflow

Angular 2 Http with custom headers getting 405

3 Answers 3

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Related