Angular Rest Api header call issue

Question

I want to set header for all request. don't want to set header for each request again and again like i have code like this

public update(student: Student): Promise<Student>
{
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('authentication', `${student.token}`);

    const url = `${this.studentsUrl}`;

    return this.http
        .put(url, JSON.stringify(student), { headers: headers })
        .toPromise()
        .then(() => student)
        .catch(this.handleError);
}

so is there any way from which i can set generic header for each request ?

did you tried to search http interceptors ? which angular version you are using — user1608841, Sep 25 '17 at 10:00
angular 4.3.0 onwards HTTP interceptors are supported. So If you are using angular 4.3.0+ then interceptor is best possible option. See my answer below — user1608841, Sep 25 '17 at 10:09
can you give any example of regarding how can we set generic header for each http request in angular 4? — Fahad Subzwari, Sep 25 '17 at 10:13

user1608841 · Accepted Answer · 2017-09-25T10:28:14.290

UPDATE :

To add generic header below angular 4.3 you may need to develop custom service. Please refer this answer which explains best possible solution prior to angular 4.3.

Hi you can try HTTP interceptor:

Note : HTTP interceptors are supported by Angular 4.3+

This is interceptor file

import { Injectable, NgModule} from ‘@angular/core’;
import { Observable } from ‘rxjs/Observable’;
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest} from ‘@angular/common/http’;
import { HTTP_INTERCEPTORS } from ‘@angular/common/http’;
@Injectable()
export class MyInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      const dupReq = req.clone({ headers: req.headers.set(‘Consumer-Secret’, ‘some sample key’) });
      return next.handle(dupReq);
   }
};

and in app.module.ts :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { MyInterceptor } from './interceptors/my.interceptor';


@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: MyInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Please refer to this site for reference

can you map your code in my example which i mentioned in question? — Fahad Subzwari, Sep 25 '17 at 10:17
when you add this interceptor file in your project; interceptor will always intercept each and every http request and process whatever you write in interceptor — user1608841, Sep 25 '17 at 10:20

Angular Rest Api header call issue

1 Answers1