Angular中HttpInterceptor仅触发Sent事件，不处理实际响应的原因？

核心问题是HttpClient默认会自动尝试将响应解析为JSON，这会在拦截器处理HttpResponse之前就抛出解析错误，导致拦截器仅能捕获到Sent事件，无法处理实际响应内容。同时拦截器代码存在笔误（未定义的response变量）。

1. 修改请求配置，禁止自动解析JSON #

发送请求时必须指定responseType: 'blob'（multipart为二进制格式），让HttpClient返回原始Blob数据，避免提前解析JSON报错：

public sendRequest(headerData: string): Observable<MultipartResponse> {
    const requestHeaders = new HttpHeaders().set("X-Header-Data", headerData);
    
    return this.httpClient.get("localhost:12345/myroute", { 
        headers: requestHeaders,
        responseType: 'blob' // 关键：获取原始二进制数据
    }).pipe(
        map(blob => new MultipartResponse(blob))
    ) as Observable<MultipartResponse>;
}

2. 修复拦截器逻辑与笔误 #

如果坚持用拦截器统一处理，需确保拦截器能正确捕获HttpResponse，并修正代码笔误：

@Injectable({ providedIn: 'root' })
export class MyInterceptor implements HttpInterceptor {
    public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // 仅对目标请求修改responseType，避免影响其他请求
        const modifiedRequest = request.url.includes('myroute') 
            ? request.clone({ responseType: 'blob' })
            : request;

        return next.handle(modifiedRequest).pipe(
            map((event: HttpEvent<any>) => {
                if (event instanceof HttpResponse) {
                    // 修正笔误：使用event而非未定义的response
                    return event.clone({ 
                        body: new MultipartResponse(event.body) 
                    });
                }
                return event;
            })
        );
    }
}

3. 实现MultipartResponse的解析逻辑 #

Angular无内置multipart解析器，需手动处理boundary与各部分内容：

export class MultipartResponse {
    public jsonData: any;
    public binaryData: Blob;

    constructor(blob: Blob, contentTypeHeader: string) {
        blob.text().then(text => {
            // 从Content-Type头中提取分隔符boundary
            const boundary = this.extractBoundary(contentTypeHeader);
            const parts = text.split(`--${boundary}`).filter(part => part.trim() !== '');
            
            parts.forEach(part => {
                // 拆分头部与内容
                const [headerSection, content] = part.split('\r\n\r\n');
                if (!content) return;

                if (headerSection.includes('Content-Type: application/json')) {
                    this.jsonData = JSON.parse(content.trim());
                } else if (headerSection.includes('Content-Type: application/octet-stream')) {
                    // 将文本转回二进制Blob
                    this.binaryData = new Blob([content], { type: 'application/octet-stream' });
                }
            });
        });
    }

    private extractBoundary(contentType: string): string {
        const match = contentType.match(/boundary=(.*)/);
        return match ? match[1].trim() : '';
    }
}

注：如果用拦截器处理，需要从event.headers.get('Content-Type')获取头信息传入MultipartResponse构造函数。

4. 验证拦截器注册 #

你在main.ts中的注册逻辑是正确的，无需修改。

• 必须设置responseType: 'blob'或'text'，阻止HttpClient自动解析JSON，否则会提前抛出错误。
• multipart格式需要手动处理boundary和各部分的头部、内容拆分。
• 拦截器中需针对性修改请求的responseType，避免影响其他正常请求。

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