ASP.NET Core 8错误控制器捕获状态码但不显示指定视图问题

核心原因 #

• 异步请求与同步请求的浏览器处理逻辑存在本质差异：
  • 404错误、页面加载前触发的500错误，属于浏览器直接发起的同步请求，服务器返回状态码和视图HTML后，浏览器会自动接管并渲染该视图，因此能正常显示错误页面。
  • 用JavaScript fetch发起的POST请求是异步AJAX请求，浏览器不会自动将服务器返回的Error视图HTML替换当前页面，只会把响应内容传递给fetch的回调函数。如果你的JS代码未处理这个响应，就看不到错误视图；而你提到的“继续跳转页面”，通常是因为fetch的错误分支未正确拦截，导致原本请求成功后的跳转逻辑依然执行。

解决方案 #

方案1：前端处理fetch错误响应 #

修改fetch的代码逻辑，判断响应状态，遇到500等错误状态码时，将服务器返回的错误视图HTML渲染到页面，并终止后续跳转逻辑：

fetch('/Home/YourAction', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-Requested-With': 'XMLHttpRequest' // 标记为AJAX请求，方便后端识别
  },
  body: JSON.stringify(yourData)
})
.then(response => {
  if (!response.ok) {
    // 读取服务器返回的错误视图HTML
    return response.text().then(errorHtml => {
      // 将错误视图替换当前页面内容
      document.body.innerHTML = errorHtml;
      // 抛出错误，终止后续成功逻辑执行
      throw new Error('服务器内部错误');
    });
  }
  return response.json();
})
.then(data => {
  // 请求成功后的跳转或其他逻辑
  window.location.href = '/TargetPage';
})
.catch(err => {
  console.error('请求失败:', err);
});

方案2：后端区分请求类型返回不同响应 #

在ErrorController中判断请求是否为AJAX，针对AJAX请求返回JSON格式的错误信息，前端根据JSON显示自定义提示：

public IActionResult Error(int? statusCode = null)
{
    // 判断是否为AJAX请求
    bool isAjax = Request.Headers["X-Requested-With"] == "XMLHttpRequest";
    
    if (isAjax)
    {
        return Json(new 
        { 
            success = false, 
            message = statusCode == 500 ? "服务器内部错误" : "请求出错" 
        });
    }
    
    // 非AJAX请求返回视图
    var model = new ErrorViewModel { StatusCode = statusCode ?? 500 };
    return View("Error", model);
}

前端对应修改fetch错误处理逻辑：

// ...fetch代码
.then(response => {
  if (!response.ok) {
    return response.json().then(errorData => {
      alert(errorData.message);
      throw new Error(errorData.message);
    });
  }
  return response.json();
})
// ...后续逻辑

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