Angular保留responseType:blob时如何正确解析Spring Boot错误响应

当你为Angular HTTP请求设置responseType: 'blob'后，Angular会强制将**所有响应（包括错误响应）**解析为Blob对象。而你的Spring Boot后端抛出的错误是JSON格式，这就导致原本期望的错误对象被封装成Blob，error.hasOwnProperty('error')自然会返回false，无法正确获取错误内容。

下面是在保留responseType: 'blob'的前提下，正确解析错误响应的具体方案：

方案：在catchError中手动转换错误Blob为JSON #

因为后端的错误响应本质是JSON文本，我们可以通过FileReader读取Blob内容并解析成JSON对象，再进行后续处理。

修改后的代码示例：

import { from, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

// ...

return this.http.post(url, request, {responseType: 'blob'})
  .pipe(catchError((error: HttpErrorResponse) => {
    // 错误响应是Blob类型，尝试转换为JSON
    if (error.error instanceof Blob) {
      return from(new Promise((resolve, reject) => {
        const reader = new FileReader();
        // 读取Blob为文本
        reader.readAsText(error.error);
        
        reader.onload = () => {
          try {
            // 解析文本为JSON对象
            const errorData = JSON.parse(reader.result as string);
            // 抛出解析后的错误供上层处理
            reject(errorData);
          } catch (parseErr) {
            // 解析失败（比如错误是二进制Blob），抛出原错误
            reject(error);
          }
        };

        reader.onerror = () => {
          // 读取失败，抛出原错误
          reject(error);
        };
      }));
    } else {
      // 非Blob类型错误，直接抛出
      return throwError(() => error);
    }
  }));

关键说明： #

• 用FileReader.readAsText()将Blob转换为字符串，再通过JSON.parse()解析成后端返回的错误对象
• 加入双重异常处理：覆盖解析失败和读取失败的场景，避免因为非JSON格式的错误导致流程中断
• 用from(Promise)将异步的FileReader操作转换为Observable，符合RxJS的数据流规范

可选：后端配合优化（非必须） #

如果可以调整Spring Boot代码，确保异常处理类返回的错误响应Content-Type为application/json，虽然这不会改变Angular解析为Blob的行为，但能统一响应格式，避免后续出现格式混淆。

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