如何使用Angular HTTP拦截器拦截SSE请求？附失效拦截器代码

你的拦截器无法拦截SSE请求的核心原因是：SSE采用分块传输机制，不会触发HttpResponse事件，它对应的是HttpEventType.ServerSentEvent类型的事件。你当前的代码只处理了HttpResponse，自然捕获不到SSE的推送内容。

修改后的拦截器代码如下：

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

@Injectable()
export class HttpDateParserInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    return next.handle(request).pipe(
      tap({
        next: (event: HttpEvent<any>) => {
          // 处理普通HTTP响应
          if (event instanceof HttpResponse) {
            // 保留你的原有逻辑
          }
          // 处理SSE推送事件
          if (event.type === HttpEventType.ServerSentEvent) {
            // 获取SSE推送的单条数据
            const sseData = event.data;
            // 在这里添加你的SSE处理逻辑，比如解析数据、更新页面状态等
            console.log('拦截到SSE数据:', sseData);
          }
        }
      })
    );
  }
}

关键说明：

• 必须导入HttpEventType枚举，用来识别SSE对应的事件类型
• 在tap操作符中新增对HttpEventType.ServerSentEvent的判断分支
• 通过event.data可以直接获取到SSE推送的单条数据内容
• 如果需要监控SSE的连接生命周期，还可以额外判断HttpEventType.Sent（请求已发送）、HttpEventType.DownloadProgress（数据传输中）等事件

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