Angular HTTP拦截器设置响应Content-Security-Policy头不生效问题咨询

• Angular 的 HttpResponse 实例为不可变对象，调用headers.append()方法不会修改原实例的头信息，只会返回全新的Headers实例。你原代码仅调用了方法但未替换返回的响应对象，修改自然不会生效。
• 原代码使用filter操作符直接过滤掉了所有非HttpResponse类型的事件（如请求进度事件、请求发送事件等），会导致后续订阅者无法接收完整的事件流，本身存在逻辑缺陷。
• Angular完全支持通过拦截器修改响应头，不存在框架层面的限制。

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

@Injectable()
export class AddHeaderInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      map(event => {
        // 仅处理响应事件
        if (event instanceof HttpResponse) {
          // 克隆原响应并添加新的响应头
          return event.clone({
            headers: event.headers.append('content-security-policy', 'some content-security-policy')
          });
        }
        // 其他类型事件直接返回
        return event;
      })
    );
  }
}

• 该修改仅对Angular应用内部通过HttpClient发起的请求生效，只会修改应用内部拿到的响应头，不会改变浏览器收到的原始响应，也无法作用于静态资源、首屏页面加载的响应头。如果需要全局CSP生效，推荐在后端服务或反向代理层（如Nginx）配置响应头。
• 拦截器需要注册到应用根模块的HTTP_INTERCEPTORS提供者数组中才会生效，注册示例如下：

// app.module.ts 配置
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AddHeaderInterceptor } from './add-header.interceptor';
import { AppComponent } from './app.component';

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

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