Angular HttpInterceptor 不更改标头答案

【问题标题】：Angular HttpInterceptor not changing headerAngular HttpInterceptor 不更改标头
【发布时间】：2017-09-26 05:53:01
【问题描述】：

我编写了一个有角度的 (4.3.6) HttpInterceptor 来添加一些标头字段，但是如果我在调试器中检查它们，标头不会得到更新。有什么想法吗？

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {


    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        console.log('AuthInterceptor at work');

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

        const token  = localStorage.getItem('token');
        if (token) {
            const authReq = contentTypeReq.clone({
                headers: req.headers.set('Authorization', 'Bearer ' + token)
            });
            return next.handle(authReq);
        }

        // Pass on the cloned request instead of the original request.
        return next.handle(contentTypeReq);
    }
}

【问题讨论】：

设置 content-type 没用。 Angular 会为您做到这一点。您是否使用调试器运行过代码？或者只是添加了 console.log() 来检查令牌是否已设置？
是的 - 我在调试器中运行它并看到它的beeing被调用。但是标题没有更新。见angular.io/guide/http#setting-new-headers

标签： angular angular-http-interceptors

【解决方案1】：

他们很懒惰。例如keys method 看起来像：

keys(): string[] {
    this.init(); <== initialize

    return Array.from(this.normalizedNames.values());
}

如果您想检查它们，只需致电：

req.headers.keys()

如果要检查值，可以使用get 或getAll 方法：

req.headers.getAll('Content-Type')

或者您可以从控制台调用init 方法，然后您将能够在headers Map 中看到标题

此外，当angular adds headers to request 使用forEach 方法时，它也调用init 方法。

【讨论】：

我们可以更新这些标题...例如，在请求中我发送了'x-auth-token'，如果发生 401，那么我想更新标题.. 可能吗？更多信息参考：[stackoverflow.com/questions/48200491/…