在 devtools 的请求调用中看不到拦截器设置的标头答案

【问题标题】：Can't see the headers set by Interceptors in request calls in devtools在 devtools 的请求调用中看不到拦截器设置的标头
【发布时间】：2020-03-09 01:12:19
【问题描述】：

在我的 Angular 5 应用程序中，我使用拦截器来设置标题。但是当我在 devtools 中看到 HTTP 请求调用时，我看不到我设置的标头。

拦截器类：

export class InterceptorService implements HttpInterceptor{
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const duplicate = req.clone({
      setHeaders: {
        Authorization: `Bearer Lalinda`
      }
    });
    return next.handle(duplicate);
  }

  constructor() { }

}

Devtools 请求的捕获：

更新：

app.module.ts

providers: [
    { provide: PERFECT_SCROLLBAR_CONFIG, useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG},
    { provide: LocationStrategy, useClass: HashLocationStrategy},
    AuthenticationService,
    LocalStorageService,
    { provide: HTTP_INTERCEPTORS, useClass: InterceptorService, multi: true }
  ],

【问题讨论】：

您是否在应用模块中导入此服务？
@Shifenis 是的，我做到了。请检查更新的部分。
@Shifenis 我可以在选项调用中看到附加的标题吗？我的期权调用失败了。
您的选项会返回什么？
在选项中您无法看到授权标头

标签： angular http google-chrome-devtools angular-http-interceptors

【解决方案1】：

试试这个对我有用的方法：

const duplicate = req.clone({ headers: req.headers.set('Authorization', 'Bearer Lalinda') });

【讨论】：

不能在没有单引号的情况下添加“Bearer Lalinda”。在 devtools 的请求调用中仍然看不到它。
用单引号或变量添加就是我的意思
还是看不到
在拦截器中尝试控制台日志，看看它是否有效，拦截器可能没有被触发
控制台日志有效。无论如何，我可以在选项调用中看到附加的标题吗？我的期权调用失败了。