Angular中获取失败HTTP请求响应：解决错误消息为undefined的问题

先明确两个关键前提 #

• 先去浏览器DevTools的Network面板，查看请求的真实响应体，确认后端返回的错误字段结构（比如是{message: 'xxx'}还是{error: {message: 'xxx'}}），别只依赖截图。
• 不同请求库（Fetch/Axios等）的错误处理逻辑完全不一样，要对应调整代码。

Fetch API 处理方案 #

Fetch不会把4xx/5xx状态码判定为“错误”进入catch，必须手动判断响应状态：

fetch('/api/insert', {
  method: 'POST',
  body: JSON.stringify(yourData),
  headers: {'Content-Type': 'application/json'}
})
.then(res => {
  if (!res.ok) {
    // 先解析错误响应的JSON结构
    return res.json().then(errData => {
      // 根据后端实际返回的字段取消息，比如errData.message或errData.error
      throw new Error(errData.message || errData.error || '数据插入失败');
    });
  }
  return res.json();
})
.then(successData => {
  // 处理成功逻辑
})
.catch(err => {
  // 这里就能拿到正确的错误消息，直接展示给用户
  console.log(err.message);
  alert(err.message);
});

Axios 处理方案 #

Axios会自动把4xx/5xx状态码的响应抛到catch中，错误数据在error.response.data里：

axios.post('/api/insert', yourData)
.then(successData => {
  // 处理成功逻辑
})
.catch(err => {
  if (err.response) {
    // 后端返回的错误数据，根据实际字段取消息
    const errMsg = err.response.data.message || err.response.data.error || '数据插入失败';
    console.log(errMsg);
    alert(errMsg);
  } else if (err.request) {
    // 网络问题导致没收到响应
    alert('网络异常，请稍后重试');
  } else {
    // 请求配置出错
    alert(err.message);
  }
});

常见踩坑点 #

• 字段名不匹配：如果后端返回的错误字段是errMsg，你却取message，必然是undefined，一定要和后端返回的结构完全对应。
• 未解析响应：如果后端返回JSON格式，但你没调用res.json()（Fetch）或直接忽略error.response.data（Axios），肯定拿不到数据。
• 跨域拦截：如果后端没配置CORS，浏览器会拦截错误响应，此时先解决跨域问题才能拿到真实错误。

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