如何在 Angular 5 HttpInterceptor 中添加多个标头

发布于02月08日

我正在try 学习如何使用HttpInterceptor向应用程序向API发出的每个HTTP请求添加几个头.我有这个拦截器:

import { Injectable } from '@angular/core';

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

import { Observable } from 'rxjs/Observable';


@Injectable()
export class fwcAPIInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    const authReq = req.clone({
      headers: req.headers.set('Content-Type', 'application/json')
    });

    console.log('Intercepted HTTP call', authReq);

    return next.handle(authReq);
  }
}

除了'Content-Type'个标题之外，我还需要添加一个'Authorization'，但我不知道怎么做(Angular HttpHeaders的文档只是方法列表，没有任何解释).

我该怎么做？谢谢

推荐答案

Edit:以下建议在 comments 中我统一了两个答案

Overwriting all headers

@Injectable()
export class fwcAPIInterceptor implements HttpInterceptor {
  intercept (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

  const authReq = req.clone({
    headers: new HttpHeaders({
      'Content-Type':  'application/json',
      'Authorization': 'my-auth-token'
    })
  });

  console.log('Intercepted HTTP call', authReq);

  return next.handle(authReq);
}

Adding more headers without overwriting分(Ketan Patil分-请参阅本文的答案)

const authReq = req.clone({
    headers: req.headers.set('Content-Type', 'application/json')
        .set('header2', 'header 2 value')
        .set('header3', 'header 3 value')
});