Correctly Setting HTTP Request Headers in Angular 2: Methods and Best Practices

Core Issues in HTTP Header Configuration

In Angular 2 applications, developers frequently need to send HTTP requests with custom headers, particularly for authentication, content-type declaration, and similar scenarios. However, many encounter issues where custom headers fail to reach the server, often due to improper configuration methods.

Correct Header Configuration Approach

Following best practices, HTTP request headers in Angular 2 must be wrapped using the RequestOptions object. Here is the proper implementation:

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

public update(student: Student): Promise<Student> {
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('authentication', `${student.token}`);
    
    let options = new RequestOptions({ headers: headers });
    
    return this.http
        .put(url, JSON.stringify(student), options)
        .toPromise()
        .then(() => student)
        .catch(this.handleError);
}

The key aspect of this method is encapsulating the headers object within a RequestOptions instance, rather than passing the headers object directly to the HTTP method. This ensures proper parsing and processing of header information.

Analysis of Common Errors

A common mistake developers make is passing the headers object directly as a parameter to the HTTP method, such as:

return this.http
    .put(url, JSON.stringify(student), { headers: headers })

While this syntax may appear correct, it does not guarantee proper header configuration. Angular's HTTP client expects a RequestOptions object, not a simple object literal.

Improvements in Angular 4 and Later Versions

Angular 4 and later versions introduced the new HttpClient module and HttpHeaders class, providing more flexible and type-safe header configuration methods.

Manual Header Configuration

The HttpHeaders class offers a more convenient way to set headers:

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

this.http.post('/api/items/add', body, {
    headers: new HttpHeaders({
        'Authorization': 'my-auth-token',
        'Content-Type': 'application/json'
    })
}).subscribe();

The HttpHeaders class is immutable, with each set() call returning a new instance:

let headers = new HttpHeaders().set('header-name', 'header-value');
headers = headers.set('header-name-2', 'header-value-2');

Global Header Management with HTTP Interceptors

For scenarios requiring shared headers across multiple requests, HTTP interceptors provide a more elegant solution. Interceptors can automatically add necessary headers before requests are sent to the server.

Creating an Interceptor Service

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const authToken = localStorage.getItem('auth_token');
        
        if (authToken) {
            const authReq = req.clone({
                setHeaders: {
                    Authorization: `Bearer ${authToken}`
                }
            });
            return next.handle(authReq);
        }
        
        return next.handle(req);
    }
}

Registering the Interceptor

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

@NgModule({
    providers: [
        {
            provide: HTTP_INTERCEPTORS,
            useClass: AuthInterceptor,
            multi: true
        }
    ]
})

Practical Recommendations and Considerations

In practical development, it is advisable to choose the appropriate header configuration method based on specific requirements. For simple, one-time header setups, manual configuration suffices; for headers shared across multiple requests (such as authentication tokens), interceptors are more suitable.

Attention must also be paid to server-side CORS (Cross-Origin Resource Sharing) configuration to ensure custom headers are permitted by the server. Some custom headers may require special server-side processing for proper reception.

By correctly configuring HTTP request headers, communication between client and server can be made more secure and efficient, providing better user experience and data security for applications.