如何在Angular中添加多个headers 5 HttpInterceptor

Question

我正在尝试学习如何使用 HttpInterceptor 向应用对 API 执行的每个 HTTP 请求添加几个 header。我有这个拦截器：

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' header 我需要添加一个 'Authorization' 但我不知道该怎么做（Angular HttpHeaders 的文档只是方法列表，没有任何解释）。

我该怎么做？谢谢！

Answer 1

编辑： 根据评论中的建议，我统一了两个答案

覆盖全部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);
}

在不覆盖的情况下添加更多 headers（感谢 Ketan Patil - 请参阅此 post 中的答案）

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

Answer 2

我尝试了以下使用拦截器发送自定义 header 的方法。请检查 link stackBlitz

请参考控制台截图供您参考browser console-request header

并且在

中添加了自定义 header

access-control-request-headers:authkey,content-type,deviceid

我希望将 header 添加为 header 的一部分，而不是 access-control-request-headers。请对此提出建议

Answer 3

  const modifiedReq = req.clone({
      url: this.setUrl(req.url),
      headers: this.addExtraHeaders(req.headers)
    });

以及方法：

private addExtraHeaders(headers: HttpHeaders): HttpHeaders {
  headers = headers.append('myHeader', 'abcd');
  return headers;
}

方法 .append 创建一个新的 HttpHeaders object 添加 myHeader 和 returns 新的 object.

使用此解决方案意味着您还可以使用多个拦截器，因为您不会覆盖您的 headers。

Answer 4

由于set方法returnsheadersobject每次都可以这样操作。这样，拦截请求中的原始 headers 也将被保留。

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

Answer 5

如前所述 - 接受的方法覆盖 headers，为了添加它们我喜欢 API documentation:

的方法

const authReq = req.clone({ setHeaders: { Authorization: authToken } });

Answer 6

in your interceptor file

import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
import {Injectable} from '@angular/core';
import {Observable} from 'rxjs';
@Injectable()
export class fwcAPIInterceptor implements HttpInterceptor {
  intercept (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

  const auth = req.clone({
    headers: new HttpHeaders({
      'Content-Type':  'application/json',
      'Auth-Token': 'jwtToken'
    })
  });



  return next.handle(auth);
}



 **in app module**

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


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    {provide: HTTP_INTERCEPTORS, useClass: CustomHttpInterceptorService, multi: true},
  ],
  bootstrap: [AppComponent]
})

Answer 7

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

    let headers = new HttpHeaders();
    headers = headers.set('Content-Type', 'application/json');
    headers = headers.set('Authorization', 'my-auth-token');

    const authReq = req.clone({headers});
    console.log('Intercepted HTTP call', authReq);

    return next.handle(authReq);
  }
}

如何在Angular中添加多个headers 5 HttpInterceptor

How to add multiple headers in Angular 5 HttpInterceptor

angular

angular-http-interceptors

angular-httpclient