Angular 5 doesn't include headers to http request

Question

I am trying very simple angular 5 http 'GET' request. When i check chrome developer tools, i couldn't see http headers.

import { HttpClient, HttpHeaders } from '@angular/common/http';
   // ...

   const headers = new HttpHeaders(
      {
        'Authorization': 'Basic ' + btoa(user.username + ':' + user.password)
      }
    );
    this.http.get('xyz-url', { headers }).subscribe((data: any) => {
      // do something
    });

Answer 1

I would recommend you to create interceptor for this:

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  // ...

  public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    request = request.clone({
      setHeaders: {
        Authorization: 'Basic ' + btoa(user.username + ':' + user.password)
      }
    });
    return next.handle(request);
  }
  // ...
}

Answer 2

You can see in the "Network Tab"

Answer 3

Set the headers to header property

this.http.get('xyz-url', { headers : headers }).subscribe((data: any) => {
  // do something
});

Also, check the network tab to see the request details such as headers.

Answer 4

Try this.

import { HttpHeaders } from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'Authorization': 'my-auth-token'
  })
};

this.http.get('xyz-url', { httpOptions }).subscribe((data: any) => {
      // do something
});

Read more about adding http headers in here

Answer 5

I think it can solve your problem

  import {
        HttpClient,
        HttpRequest,
        HttpHeaders
    } from '@angular/common/http';

@Injectable()
export class HttpService {

    constructor(private httpClient: HttpClient) {
    }
       /**
        * Request options.
        * @param headerOptions
        * @returns {RequestOptionsArgs}
        */

        private requestOptions(headerOptions?: any): any {
            let options = {
                        headers: new HttpHeaders({
                            "Authorization": "Bearer " + 
                             this.session.get('token),
                            "Content-Type": "application/json"
                        })
                    }

            } 
            return options;
        }
/**
     * This method is use for send GET http Request to API.
     * @param url - Additional request URL.
     * @param body - params.
     * @param options  - Header(s) which will pass with particular request.
     */
    get(url: string, options?: any): Observable<any> {

        return this.httpClient.get(url, this.requestOptions(options))
    }