Angular - 每次 http 调用添加 XSRF

Question

在 Angular 项目中，我尝试向每次调用添加拦截器（称为 XSRF TOKEN）。代码类似于

拦截器

 import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpXsrfTokenExtractor } from "@angular/common/http";
    import { Injectable } from "@angular/core";
    import { Observable } from "rxjs";
    
    @Injectable()
    export class HttpXsrfInterceptor implements HttpInterceptor {
    
      constructor() {
      }
    
      intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
       // if (!req.headers.has('XSRF-TOKEN')) {
          req.clone({ headers: req.headers.set('XSRF-TOKEN', 'TEST') });
        //}
        return next.handle(req);
      }
    }

Admin.ts

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

问题：这个拦截器没有出现在headers中

网络

那么：这是在 angular 中添加拦截器的正确方法吗？有什么问题吗？

Answer 1

您需要重新分配请求变量 (req = ...)，因为您是在克隆原始请求，而不是更改它。

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  if (!req.headers.has('XSRF-TOKEN')) {
    req = req.clone({ headers: req.headers.set('XSRF-TOKEN', 'TEST') });
  }

  return next.handle(req);
}