In this guide let us explore how to add HTTP Headers to an HTTP request in Angular. There are two ways by which we can add the headers. One, we add the HTTP Headers while making a request. The second way is to use the HTTP interceptor to intercept all the Requests and add the Headers. In both cases, we use the httpHeaders configuration option provided by angular HttpClient to add the headers.
HTTP Headers let the client and the server share additional information about the HTTP request or response. For example, we use the content-type header to indicate the media type of the resource like JSON, text, blob, etc. Another important header is where you send the bearer token using the Authorization header 'Authorization', 'Bearer <yourTokenhere>'
We add HTTP Headers using the FormBuilder HttpHeaders helper class. It is passed as one of the arguments to the GET, POST, PUT, DELETE, PATCH & OPTIONS request.
To use HttpHeaders in your app, you must import it into your component or service
import { HttpHeaders } from '@angular/common/http';
Then create an instance of the class
const headers= new HttpHeaders()
.set('content-type', 'application/json')
.set('Access-Control-Allow-Origin', '*');
And then call the httpClient.get method passing the headers as the argument
return this.httpClient.get(this.baseURL + 'users/' + userName + '/repos', { 'headers': headers })
Note that httpHeaders are immutable. i.e every method on HttpHeaders object does not modify it but returns a new HttpHeaders object.
The httpHeaders class has several methods using which you can manipulate the headers.
set(name: string, value: string | string[]): HttpHeaders
The Sets method returns a new instance after modifying the given header. If the header already exists, its value is replaced with the given value in the returned object.
const headers = new HttpHeaders()
.set('content-type', 'application/json')
.set('Access-Control-Allow-Origin', '*');
The HTTP headers are immutable. The following example does not work as each set method returns a new header and does not update the original header.
let headers = new HttpHeaders()
headers .set('content-type', 'application/json')
headers .set('Access-Control-Allow-Origin', '*')
console.log(headers);
To workaround, you can use the code as follows
const headers= new HttpHeaders()
.set('content-type', 'application/json')
.set('Access-Control-Allow-Origin', '*');
You can also use the following code
let headers = new HttpHeaders()
headers=headers.set('content-type','application/json')
headers=headers.set('Access-Control-Allow-Origin', '*');
console.log(headers)
append(name: string, value: string | string[]): HttpHeaders
The append method appends a new value to the existing set of values for a header and returns a new instance. The append method does not check if the value exists.
let headers = new HttpHeaders()
headers=headers.append('content-type','application/json')
headers=headers.append('Access-Control-Allow-Origin', '*')
headers=headers.append('content-type','application/x-www-form-urlencoded')
console.log(headers)
The above results in content-type header in the request header as
content-type: application/json,application/x-www-form-urlencoded
has(name: string): boolean
Returns true if the given header with the name already exists in the HttpHeaders. The following code checks if the content-type header present in the request header. If not it adds it.
let headers = new HttpHeaders()
headers=headers.append('Access-Control-Allow-Origin', '*')
if (!headers.has('content-type')) {
headers=headers.append('content-type','application/json')
}
get(name: string): string | null
Get the first value for the given header name, or null if it’s not present.
let headers = new HttpHeaders()
.set('content-type','application/json')
.set('Access-Control-Allow-Origin', '*')
const h =headers.get('content-type')
if (h==null) {
console.log('content type header not present')
} else {
console.log(h) //returns 'application/json'
}
getAll(name: string): string[] | null
Get all the headers for the given header name, or null if it’s not present.
let headers = new HttpHeaders()
.set('content-type','application/json')
.set('Access-Control-Allow-Origin', '*')
.append('content-type','application/x-www-form-urlencoded')
const h =headers.getAll('content-type')
console.log(h)
*** output
0: "application/json"
1: "application/x-www-form-urlencoded"
keys(): string[]
Get all the headers for this request.
let headers = new HttpHeaders()
.set('content-type','application/json')
.set('Access-Control-Allow-Origin', '*')
.append('content-type','application/x-www-form-urlencoded')
const h =headers.getAll('content-type')
console.log(h)
*** output
0: "application/json"
1: "application/x-www-form-urlencoded"
delete(name: string, value?: string | string[]): HttpHeaders
Deletes the header and returns the new headers. You can delete using the header name or by using the name & value.
let headers = new HttpHeaders()
.set('content-type','application/json')
.set('Access-Control-Allow-Origin', '*')
.append('content-type','application/x-www-form-urlencoded')
headers=headers.delete("content-type","application/json") //delete content-type='application/json'
headers=headers.delete("content-type") //delete all content-type headers
The following code shows how you can create HttpHeaders from an object.
let headers = new HttpHeaders({ 'Access-Control-Allow-Origin': '*','content-type': 'application/json'} )
console.log(headers)
Most headers we add to the HTTP Request in the entire application are likely to remain the same. Adding them to every GET,POST,PUT, etc requests are cumbersome. Instead, you can make use of the HTTP Interceptors to intercept every request and add the commonly used headers. Refer to our tutorial on how to set HttpHeaders using HTTP Interceptors
Refer to our tutorial on HTTP Post example.
The code requires you to set up a fake backend server using json-server. Install JSON server using the following command.
npm install -g json-server
Create a db.json file with some data.
{
"people": [
{
"id": 1,
"name": "Don Bradman"
},
{
"id": 2,
"name": "Sachin Tendulkar"
}
]
}
Start the server with the following command. The server will run on the port http://localhost:3000/
json-server --watch db.json
export class Person {
id:number
name:string
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms'
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
FormsModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';
import { Person } from './person';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'http Headers Example';
people:Person[];
person = new Person();
constructor(private apiService:ApiService) {}
ngOnInit() {
this.refreshPeople()
}
refreshPeople() {
this.apiService.getPeopleFromObject()
.subscribe(data => {
this.people=data;
})
}
addPerson() {
this.apiService.addPerson(this.person)
.subscribe(data => {
this.person = new Person();
this.refreshPeople();
})
}
}
<h1>{{title}}</h1>
<div>
<div>
<label>Name: </label>
<input [(ngModel)]="person.name" />
</div>
<div>
<button (click)="addPerson()">Add</button>
</div>
</div>
<button (click)="refreshPeople()">Refresh</button>
<table class='table'>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let person of people;">
<td>{{person.id}}</td>
<td>{{person.name}}</td>
</tr>
</tbody>
</table>
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Person } from './person';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class ApiService {
baseURL: string = "http://localhost:3000/";
constructor(private http: HttpClient) {
}
getPeople(): Observable<Person[]> {
console.log('getPeople ' + this.baseURL + 'people')
return this.http.get<Person[]>(this.baseURL + 'people')
}
//Adding headers
getPeopleWithHeaders(): Observable<Person[]> {
const headers = { 'content-type': 'application/json'}
console.log(headers)
return this.http.get<Person[]>(this.baseURL + 'people',{'headers':headers})
}
//Set method
getPeopleWithSet(): Observable<Person[]> {
const headers = new HttpHeaders()
.set('content-type','application/json')
.set('Access-Control-Allow-Origin', '*');
console.log(headers)
return this.http.get<Person[]>(this.baseURL + 'people',{'headers':headers})
}
//This wont work
getPeopleWithImmutable(): Observable<Person[]> {
const headers = new HttpHeaders()
headers.set('content-type','application/json')
headers.set('Access-Control-Allow-Origin', '*');
console.log(headers)
return this.http.get<Person[]>(this.baseURL + 'people',{'headers':headers})
}
getPeopleWithImmutable1(): Observable<Person[]> {
let headers = new HttpHeaders()
headers=headers.set('content-type','application/json')
headers=headers.set('Access-Control-Allow-Origin', '*');
console.log(headers)
return this.http.get<Person[]>(this.baseURL + 'people',{'headers':headers})
}
getPeopleAppend(): Observable<Person[]> {
let headers = new HttpHeaders()
headers=headers.append('content-type','application/json')
headers=headers.append('Access-Control-Allow-Origin', '*')
headers=headers.append('content-type','application/x-www-form-urlencoded')
headers=headers.append('customer-header', 'custom')
console.log(headers)
return this.http.get<Person[]>(this.baseURL + 'people',{'headers':headers})
}
getPeopleHas(): Observable<Person[]> {
let headers = new HttpHeaders()
//headers=headers.append('content-type','application/json')
headers=headers.append('Access-Control-Allow-Origin', '*')
if (!headers.has('content-type')) {
headers=headers.append('content-type','application/json')
}
console.log(headers)
return this.http.get<Person[]>(this.baseURL + 'people',{'headers':headers})
}
getPeopleGet(): Observable<Person[]> {
let headers = new HttpHeaders()
.set('content-type','application/json')
.set('Access-Control-Allow-Origin', '*')
const h =headers.get('content-type')
if (h==null) {
console.log('content type header not present')
} else {
console.log(h)
}
return this.http.get<Person[]>(this.baseURL + 'people',{'headers':headers})
}
getPeopleGetAll(): Observable<Person[]> {
let headers = new HttpHeaders()
.set('content-type','application/json')
.set('Access-Control-Allow-Origin', '*')
.append('content-type','application/x-www-form-urlencoded')
const h =headers.getAll('content-type')
console.log(h)
return this.http.get<Person[]>(this.baseURL + 'people',{'headers':headers})
}
getPeopleKeys(): Observable<Person[]> {
let headers = new HttpHeaders()
.set('content-type','application/json')
.set('Access-Control-Allow-Origin', '*')
.append('content-type','application/x-www-form-urlencoded')
const h =headers.keys()
console.log(h)
return this.http.get<Person[]>(this.baseURL + 'people',{'headers':headers})
}
getPeopleDelete(): Observable<Person[]> {
let headers = new HttpHeaders()
.set('content-type','application/json')
.set('Access-Control-Allow-Origin', '*')
.append('content-type','application/x-www-form-urlencoded')
headers=headers.delete('content-type','application/json')
//headers=headers.delete("content-type")
console.log(headers)
return this.http.get<Person[]>(this.baseURL + 'people',{'headers':headers})
}
getPeopleFromObject(): Observable<Person[]> {
let headers = new HttpHeaders({ 'Access-Control-Allow-Origin': '*','content-type': 'application/json'} )
console.log(headers)
return this.http.get<Person[]>(this.baseURL + 'people',{'headers':headers})
}
addPerson(person:Person): Observable<Person> {
const headers = { 'content-type': 'application/json'}
const body=JSON.stringify(person);
console.log(body)
return this.http.post<Person>(this.baseURL + 'people', body,{'headers':headers})
}
}
We learned how to add/modify the HTTP Headers using the HttpHeaders in Angular.
