如何阻止Angular的HttpClient在PUT/POST/PATCH请求中读取cookie

这个问题的根源在于Angular默认启用了XSRF跨站请求伪造保护机制：对于PUT、POST、PATCH这类修改型请求，Angular的HttpXsrfInterceptor会自动尝试通过HttpXsrfCookieExtractor读取document.cookie获取XSRF令牌，但你的iframe环境是沙箱化且没有allow-same-origin权限，导致读取cookie时抛出错误。而GET请求不会触发XSRF拦截逻辑，所以能正常运行。

针对你的场景，有两种简洁的解决方案：

方案一：全局替换XSRF令牌提取器（推荐） #

创建一个自定义的令牌提取器，直接返回null，这样拦截器就不会尝试读取cookie，也不会添加XSRF请求头：

1. 新建一个null-xsrf-cookie-extractor.ts文件：

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

export class NullXsrfCookieExtractor extends HttpXsrfCookieExtractor {
  override getToken(): string | null {
    // 直接返回null，避免读取document.cookie
    return null;
  }
}

2. 在你的AppModule中替换默认的提取器：

import { NgModule } from '@angular/core';
import { HttpXsrfCookieExtractor } from '@angular/common/http';
import { NullXsrfCookieExtractor } from './null-xsrf-cookie-extractor';

@NgModule({
  declarations: [/* 你的组件 */],
  imports: [/* 你的模块 */],
  providers: [
    { 
      provide: HttpXsrfCookieExtractor, 
      useClass: NullXsrfCookieExtractor 
    }
  ],
  bootstrap: [/* 根组件 */]
})
export class AppModule { }

方案二：针对特定请求跳过XSRF拦截 #

如果你的应用中部分请求需要保留XSRF保护，可通过自定义拦截器，根据请求方法或URL跳过XSRF处理：

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

@Injectable()
export class SkipXsrfInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    // 对PUT/POST/PATCH请求跳过XSRF处理
    if (['PUT', 'POST', 'PATCH'].includes(request.method.toUpperCase())) {
      // 克隆请求并添加跳过XSRF的标记
      request = request.clone({
        setHeaders: {
          'X-XSRF-TOKEN': 'null' // 用null值让默认拦截器跳过处理
        }
      });
    }
    return next.handle(request);
  }
}

然后在AppModule中注册这个拦截器：

@NgModule({
  providers: [
    { 
      provide: HTTP_INTERCEPTORS, 
      useClass: SkipXsrfInterceptor, 
      multi: true 
    }
  ]
})
export class AppModule { }

注意：这两种方案都需要确保你的后端不需要XSRF令牌验证，如果后端依赖XSRF保护，你需要和iframe宿主方沟通添加allow-same-origin权限，但根据你的描述，你无法控制宿主环境，所以只能选择禁用前端的XSRF自动处理。

内容的提问来源于stack exchange，提问作者frido