.NET 5 Web API自定义错误信息在Axios捕获中无法获取的问题

我开发了一个.NET 5 Web API，通过NotFound方法返回包含自定义错误信息的字符串，该自定义错误详情：
(a) 能在Postman的响应体中正常显示，但
(b) 在React的Axios代码的catch块中无法查看这些错误信息？

如何从.NET 5 Web API获取这类详细错误信息？axios.post请求正常，仅在模拟错误状态时，我希望获取API返回的额外错误信息传递给客户端。

API代码（.NET 5） #

var errorDetails = new
{
    error = "Custom error",
    message = "Custom message",
    details = "Custom details"
};
var errorDetailsJson = JsonSerializer.Serialize(errorDetails);
return NotFound(errorDetailsJson);

React/Axios代码 #

try {
    let response = await axios.post(url, body, await getCustomAuthOptions('POST'));
    let data = await response.data;
    return data as T;
} catch (error) {
    console.log(error.toJSON());  // 这里看不到包含自定义错误信息的响应体
    throw error;
}

catch块中console.log的结果 #

{
  "message": "Request failed with status code 404",
  "name": "Error",
  "stack": "Error: Request failed with status code 404\n ...cut",
  "config": {
    "url": "https://localhost:5001/THE_URL_I_USE",
    "method": "post",
    "data": "",
    "headers": {
      "Accept": "application/json",
      "Content-Type": "application/json",
      "Authorization": "Bearer xxxetc"
    },
    "transformRequest": [
      null
    ],
    "transformResponse": [
      null
    ],
    "timeout": 0,
    "xsrfCookieName": "XSRF-TOKEN",
    "xsrfHeaderName": "X-XSRF-TOKEN",
    "maxContentLength": -1,
    "maxBodyLength": -1,
    "mode": "cors"
  }
}

1. 修正.NET API的返回方式 #

你现在手动序列化错误对象并返回字符串，会导致响应的Content-Type为text/plain，而非Axios默认期望的application/json，这是Axios无法自动解析错误响应体的核心原因。

直接返回错误对象即可，ASP.NET Core会自动完成序列化并设置正确的响应头：

var errorDetails = new
{
    error = "Custom error",
    message = "Custom message",
    details = "Custom details"
};
return NotFound(errorDetails); // 直接返回对象，无需手动序列化

2. 修正Axios的错误处理逻辑 #

Axios抛出的错误对象中，服务器返回的响应数据存储在error.response.data里，而非error.toJSON()的结果。调整catch块代码如下：

try {
    let response = await axios.post(url, body, await getCustomAuthOptions('POST'));
    return response.data as T;
} catch (error) {
    // 区分网络错误和服务器返回的错误
    if (error.response) {
        // 服务器返回了响应（包括4xx/5xx状态码）
        console.log("自定义错误信息：", error.response.data);
        // 可提取错误信息抛给上层
        throw new Error(error.response.data.message || error.message);
    } else {
        // 网络错误等无响应的情况
        console.log("请求出错：", error.message);
        throw error;
    }
}

调整后就能在catch块中获取到API返回的自定义错误详情。

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