Angular中HttpErrorResponse未按对象工作，无法获取错误消息

可能原因及对应解决方案 #

1. 后端响应格式不符合Angular HttpClient默认期望 #

Angular的HttpClient默认会尝试将响应解析为JSON格式，如果后端直接返回纯文本字符串（如BadRequest("xxx")），解析失败会导致HttpErrorResponse的属性异常，仅显示状态文本"BadRequest"。

修复方式（C#后端）：
返回结构化的JSON对象而非纯文本，确保Angular能正确解析：

if (relatedPagelle.Any())
{
    return BadRequest(new { Message = "Esistono pagelle per questa iscrizione. Impossibile eliminare." });
}

2. Angular全局HTTP拦截器篡改了错误对象 #

如果项目中使用了HTTP拦截器，检查拦截器的错误处理逻辑，是否在传递错误时丢失了原始的HttpErrorResponse信息（比如只返回了状态文本）。

修复方式：
确保拦截器完整传递错误对象，示例拦截器错误处理逻辑：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  return next.handle(req).pipe(
    catchError((err: HttpErrorResponse) => {
      // 不要修改原始错误对象，直接抛出或添加自定义处理后再抛出
      return throwError(() => err);
    })
  );
}

3. 手动解析非JSON格式的错误响应 #

如果后端必须返回纯文本错误消息，在Angular中需要手动将Blob格式的错误体转换为文本：

removeFromAttended(class: CLS_Class) {
  this.svcSubscriptions.deleteByStudenteAndClass(class.id , this.studentID).subscribe({
    next: res=> { /* ...原有逻辑... */ },
    error: (err: HttpErrorResponse) => {
      if (err.error instanceof Blob) {
        // 解析Blob为文本
        err.error.text().then(errorText => {
          console.log("错误消息:", errorText);
          // 这里可以处理错误消息，比如展示给用户
        });
      } else {
        // 正常JSON格式错误
        console.log("错误消息:", err.error?.Message || err.message);
      }
    }
  });
}

4. 检查生产环境的CORS配置 #

发布后环境的CORS设置可能限制了错误响应的内容暴露，确保后端CORS配置允许浏览器访问错误响应的body。比如在ASP.NET Core中，确保CORS策略没有过滤错误响应：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAll", policy =>
    {
        policy.AllowAnyOrigin()
              .AllowAnyMethod()
              .AllowAnyHeader();
    });
});

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