Can't set custom header in httpclient (ionic 3 app angular 5)

Question

I am trying to use an api which requires an API key 'Auth', I am trying to send the key using httpHeaders using below code

getTest(){
let data = {'loginusertype':'12','loginuserid':'51','apitype':'1','start':'0','end':'20'};
let headers = new HttpHeaders({'Content-Type':'application/json; charset=utf-8','Auth':'593eb2c274d640a8798493bf340e08b6'});
this.http.post('http://www.mymediaxchange.com/api/serviceapi/v1/currentworks',data,{headers:headers})
.subscribe(
  (data) => console.log(data),
  (error) => console.log(error)
)  }

But I am not able to set headers the headers are set as below

Things I have tried
1) Used interceptors
2) The solution in this question
Angular HttpClient doesn't send header
3) this.http.post('mymediaxchange.com/api/serviceapi/v1/currentworks',data,{headers: {'Auth': 'YourAuthorizationKey'}})

Answer 1

You can try using interceptor service for this. What it does, it adds an Authorization header to every request from your application.

@Injectable()
export class JwtInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // add authorization header with token
    const currentUser = JSON.parse(String(localStorage.getItem('currentUser')));
    if (currentUser && currentUser.Token) {
      request = request.clone({
        setHeaders: {
          Authorization: `${currentUser.Token}`
        }
      });
    }
    return next.handle(request);
  }
}

And use it in your module providers section.

providers: [
        {
          provide: HTTP_INTERCEPTORS,
          useClass: JwtInterceptor,
          multi: true
        }
      ]