Angular2 pass authorization inside header request

Question

I am trying to authorize user by sending btoa encyption login string to request headers in angular2 but headers is sending authorization key inside request payload . Please refer to the screenshot

Login Service:

import { Http, Headers, Response, URLSearchParams } from '@angular/http';

let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Authorization', loginString);

return this.http.post('http://localhost:9090/api/users/authenticate', 
{headers: headers}).map(res => res.json());    

I want to send Authorization key inside Request Headers instead of Request Payload

Thanks

Answer 1

You are passing your headers in the body parameter, try this

import { Http, Headers, RequestOptions, Response, URLSearchParams } from '@angular/http';

let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Authorization', loginString);

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

return this.http.post('http://localhost:9090/api/users/authenticate', 
null, options).map(res => res.json());  

Answer 2

You are using a POST request. The place where you put your header is actually where the body should be. However, what you are doing would be correct for a GET request.