how to add custom headers to httpRequest in angular

Question

I am trying make an http get() request by passing some values in headers, Now i am replacing the headers like this:

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import {ICustomer} from 'src/app/models/app-models';

@Injectable({
  providedIn: 'root'
})
export class MyService {
private baseUrl = '....api url....';
public authKey = '....auth_key......';

  constructor(private http: HttpClient) { }

  public async AllCustomers(): Promise<ICustomer[]> {
   const apiUrl = `${this.baseUrl}/customers`;

   return this.http.get<ICustomer[]>(apiUrl ,
    {headers: new HttpHeaders({Authorization: this.authKey})}).toPromise();<=====
  }

}

When i replace the headers like this:

headers: new HttpHeaders({Authorization: this.authKey})

The default headers values(i,e Content-Type : application/json) will be replaced by the above headers.

Instead of replacing the headers how can i add custom headers, I tried like this:

  public async AllCustomers(): Promise<ICustomer[]> {
    const apiUrl = `${this.baseUrl}/courses`;
    const headers = new HttpHeaders();
    headers.append('Authorization', this.authKey);
    headers.append('x-Flatten', 'true');
    headers.append('Content-Type', 'application/json');

    return this.http.get<ICustomer[]>(apiUrl).toPromise();
  }

What's wrong with my approach, I am new to angular, Any help?

If you want to send auth token why don't you use an http interceptor ? — CruelEngine
– CruelEngine, Commented Jun 26, 2019 at 7:01

Tony · Accepted Answer · 2020-10-10 09:15:39Z

15

You should add header to your get request like this. Also since HttpHeaders is immutable object you have to reassign header object

  public async AllCustomers(): Promise<ICourses[]> {
    const apiUrl = `${this.baseUrl}/courses`;
    let headers = new HttpHeaders();
    headers = headers.append('Authorization', this.authKey);
    headers = headers.append('x-Flatten', 'true');
    headers = headers.append('Content-Type', 'application/json');

    return this.http.get<ICourses[]>(apiUrl, {headers}).toPromise();
  }

edited Oct 10, 2020 at 9:15

answered Jun 26, 2019 at 6:48

Tony

20.3k7 gold badges42 silver badges62 bronze badges

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

2 Comments

SGR Over a year ago

I have added header to get request as you told. Got this error

ERROR Error: Uncaught (in promise): HttpErrorResponse: {"headers":{"normalizedNames":{},"lazyUpdate":null,"headers":{}},"status":401,"statusText":"Unauthorized","url"

Tony Over a year ago

Then your auth key is wrong. Check your auth key again

Javascript Hupp Technologies · Accepted Answer · 2019-06-26 06:51:06Z

1

I think you forgot to add headers object in request

From

return this.http.get<ICourses[]>(apiUrl).toPromise();

To

return this.http.get<ICourses[]>(apiUrl, { headers }).toPromise();

answered Jun 26, 2019 at 6:51

Javascript Hupp Technologies

2,1752 gold badges15 silver badges28 bronze badges

Comments

user6600549 · Accepted Answer · 2019-06-26 06:53:00Z

1

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


constructor(private _http: HttpClient) { 

}


public getHeaders(): HttpHeaders {
  const headers = new HttpHeaders({
    'Content-Type':  'application/json',
    'Authorization': `Bearer ${this._auth.token}`
  });
  return headers;
}


public getData() {
  const url     = `https://stackoverflow.com/api/test`;
  const body    = { };
  const options = { headers: this.getHeaders() };
  return this._http.post<any>(url, body, options);
}

answered Jun 26, 2019 at 6:53

user6600549

Comments

Mohamed Badr · Accepted Answer · 2023-04-08 11:45:21Z

0

For Angular 15, below code works (thanks to George C.)

let headers = new HttpHeaders({'customHeader', 'customHeaderValue'});

return this.http.post<any>(BaseUrl + 'api/endpoint', formData, { headers: headers, observe: 'response' })

However below code sample only does lazy updates.

let headers = new HttpHeaders();
headers = headers.set('customHeader': 'customHeaderValue');
return this.http.post<any>(BaseUrl + 'api/endpoint', formData, { headers: headers, observe: 'response' })

edited Apr 8, 2023 at 11:45

Mohamed Badr

2,6722 gold badges29 silver badges46 bronze badges

answered Jan 4, 2023 at 8:34

Andy Liu

11 bronze badge

Collectives™ on Stack Overflow

how to add custom headers to httpRequest in angular

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related