Angular中HttpClient配合拦截器无法获取API错误响应如何解决

问题根源 #

1. 拦截器内错误处理逻辑不符合RxJS规范，错误使用throw语法抛出throwError返回的Observable，且额外拼接的前缀字符串破坏了原始错误结构
2. Service层的错误处理中将HttpErrorResponse对象整体序列化为字符串，丢失了可直接读取属性的对象结构
3. 额外注意：拦截器中给请求头添加Access-Control-Allow-Origin、Access-Control-Allow-Credentials属于错误操作，这两个是后端返回的响应头，前端添加无效还可能引发跨域异常

修复步骤 #

1. 修改拦截器错误处理逻辑

// 先导入HttpErrorResponse类型
import { HttpErrorResponse } from '@angular/common/http';

// 调整intercept方法中的错误处理部分
return next.handle(request).pipe(
  catchError((err: HttpErrorResponse) => {
    if (err.status === 401) {
      // 可直接读取错误对象中的错误信息提示
      this.toastr.error(`登录状态失效：${err.error?.message || '未知错误'}`)
    }
    // 直接返回原始错误对象即可，RxJS 7及以上版本要求传入工厂函数，旧版本直接写throwError(err)
    return throwError(() => err);
  })
);

// 同时删除setHeaders中的两个跨域响应头配置，不要前端添加

2. 调整Service层错误处理（不需要序列化错误）

如果不需要在Service层处理错误，可直接删除整个pipe catchError逻辑，HttpClient会默认抛出原始错误；如果需要保留日志打印，修改为：

guardarUsuario( data: {nombre: string, correo: string, pass: string, descripcion: string }) {
    return this.httpClient.post(`${ this.url }/usuario`, data).pipe(
        catchError((res: HttpErrorResponse) => {
            console.log(res);
            // 直接返回原始错误对象，不要序列化
            return throwError(() => res);
        })
    );
}

3. 组件中直接读取错误信息

this.coreService.guardarUsuario( data )
    .subscribe( 
      res => {
        console.log('Successfull response: ', res);
      }, 
      (err: HttpErrorResponse) => {
        // API返回的完整错误内容就在err.error字段中
        console.log('API返回错误信息：', err.error);
        console.log('HTTP状态码：', err.status);
      }
    );

内容的提问来源于stack exchange，提问作者ng-someone