Angular登录凭证错误时如何获取接口响应体的message信息

• 后端返回凭证错误时，会返回4xx类HTTP错误状态码（通常为401未授权），Angular HttpClient会自动将这类响应归类为错误流，不会进入subscribe的成功回调，你当前组件代码只写了成功回调逻辑，自然无法接收错误场景的响应。
• 现有错误处理逻辑存在两个缺陷：一是打印响应内容时错误读取了error.message字段，后端返回的响应体实际存储在error.error属性中；二是错误处理最终固定返回写死的通用提示字符串，把后端返回的真实错误信息完全丢弃。
• 你在请求头里手动添加的Access-Control-Allow-*系列头完全无效，这类跨域控制头必须由后端在响应中返回，前端主动添加没有任何作用。
• 后端返回的JSON字段为帕斯卡命名（首字母大写，如Succeeded/Message），你现有代码里用小写字段名取值，即使拿到响应也会读不到对应属性。

1. 修改服务层代码 #

删除无效的手动添加CORS头逻辑，修正错误处理逻辑，保留后端返回的真实提示信息：

import { HttpErrorResponse } from '@angular/common/http';
import { catchError, throwError } from 'rxjs';
import { Welcome4 } from './对应的类型定义路径'; // 保留你原有导入

// 类内方法
login(data: any): Observable<Welcome4>  {
  return this.http.post<Welcome4>(`api/Account/authenticate`, data).pipe(
    catchError(this.errorHandler)
  );
} 

errorHandler(error: HttpErrorResponse) {
  let errMsg = '请求失败，请稍后重试';
  if (error.error instanceof ErrorEvent) {
    // 客户端/网络异常
    errMsg = `网络异常：${error.error.message}`;
    console.error('客户端错误：', error.error.message);
  } else {
    // 后端返回的错误响应
    console.error(`请求错误，状态码：${error.status}，响应体：`, error.error);
    // 读取后端返回的Message字段
    if (error.error?.Message) {
      errMsg = error.error.Message;
    }
  }
  // 抛出携带真实错误信息的Error对象，不要返回固定写死的字符串
  return throwError(() => new Error(errMsg));
}

2. 修改组件层订阅逻辑 #

给subscribe添加错误回调分支，同时修正字段名的大小写匹配问题：

this.authService.login(this.formGroup.value).subscribe({
  next: (result) => {
    // 字段名和后端返回保持一致，首字母大写
    if (result.Succeeded) {
      console.log(result);
      // 登录成功逻辑，比如存储token、路由跳转
      // localStorage.setItem('authToken', result.JWToken);
      // this.router.navigate(['./navbar/orderDetails']);
    }
  },
  error: (err) => {
    // 错误场景下直接拿到服务层透传的提示信息
    alert('登录失败');
    alert(err.message);
  }
});

如果希望错误场景的响应也进入subscribe的next回调，可以修改后端接口逻辑，将凭证校验失败场景的HTTP状态码设置为200，但这种做法不符合RESTful规范，更推荐使用标准HTTP状态码+错误回调的方式处理异常场景。

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