如何使用 MVC 自定义页面错误管理处理 angularjs HTTP 错误？答案

【问题标题】：How to manage a handling angularjs HTTP error with MVC custom page error?如何使用 MVC 自定义页面错误管理处理 angularjs HTTP 错误？
【发布时间】：2020-07-11 16:17:50
【问题描述】：

• 我需要通过重定向到我自己的自定义错误页面来管理未找到的页面和服务器问题错误，因此我按照以下方式完成了此操作，并且工作正常。

web.config

<customErrors mode="On">  
<error statusCode="400" redirect="~/Error/Error400"/>  
<error statusCode="404" redirect="~/Errors/Error404" />  
<error statusCode="403" redirect="~/Error/Error403" />  
<error statusCode="500" redirect="~/Errors/Error500" />  
</customErrors>

• 现在，当我需要通过以下代码获取 angularjs http 错误（如 404）时，其中传递了控制器中不可用的错误方法 (GetDetai)（实际上是“GetDetails”）。

$http({  
        method: 'GET',  
        url: '/Admin/Dashboard/GetDetai',  
        headers: { "Content-Type": "application/json" }  
     }).then(function (result) {  
        console.log(result);  
        $scope.GetCustomer = result.data;  
        }, function (reason) {  
                console.log(reason);  
            if (reason.status == '404') {  
                console.log('Invalid Method/URL.');  
            }  
            else if (reason.status == '505') {  
                console.log('Internal server error.');  
            }  
        });

• 那么它在error函数中没有捕捉到404错误，它进入then函数并显示在下面

第一个控制台日志输出

{data: "
↵
↵
↵<!DOCTYPE html>
↵<html>
↵<head>
↵    <meta c…white;">Go Back To Home</a>
↵</body>
↵</html>
↵
↵", status: 200, config: {…}, statusText: "OK", headers: ƒ, …}
data: "
↵
↵
↵<!DOCTYPE html>
↵<html>
↵<head>
↵    <meta charset="utf-8" />
↵    <title></title>
↵    <style>
↵        body {
↵            display: inline-block;
↵            background: #00AFF9 url(https://cbwconline.com/IMG/Codepen/Unplugged.png) center/cover no-repeat;
↵            height: 100vh;
↵            margin: 0;
↵            color: white;
↵        }
↵
↵        h1 {
↵            margin: .8em 3rem;
↵            font: 4em Roboto;
↵        }
↵
↵        p {
↵            display: inline-block;
↵            margin: .2em 3rem;
↵            font: 2em Roboto;
↵        }
↵    </style>
↵</head>
↵<body>
↵    <h1>Whoops!</h1>
↵    <p>Something went wrong</p><br /><br />
↵    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
↵    <a href="/Home/Index" style="color:white;">Go Back To Home</a>
↵</body>
↵</html>
↵
↵"
status: 200
headers: ƒ (name)
config: {method: "GET", transformRequest: Array(1), transformResponse: Array(1), jsonpCallbackParam: "callback", paramSerializer: ƒ, …}
statusText: "OK"
xhrStatus: "complete"
__proto__: Object

• 但是当我评论/删除 web.config 自定义错误代码时，这个 angularjs http 调用错误函数正常工作，出现预期的 404 错误。

那么如何在不依赖和不影响其他代码的情况下正确管理这两种错误呢？

【问题讨论】：

请注意，您在“第一个错误”代码示例中得到的响应是 status: 200。这意味着当发生错误时，您正在检索的网站不会返回正确的 HTTP status code。
但它没有捕获错误函数，它来自 then 函数
@abbasarman 因为你的服务器有status: 200作为响应。检查你共享的FIRST_ERROR。服务器应返回404。你能从网络标签分享确切的 url 调用吗？ ? （请备注域名和所有敏感信息）
@abbasarman ：此外，在本地使用 angular.js 而不是 angular.min.js 时，您的角度错误在使用 angular.js 时更具可读性
@abbasarman：现在说得通了。您需要发送 404 错误代码以让 UI 执行其操作。否则，您必须在所有响应中检查<html> 模式以区分。那就大错特错了。

标签： c# angularjs visual-studio model-view-controller

【解决方案1】：

您的 HTTP 调用返回状态“200”，即“正常”，因此您看不到 HTTP 错误处理检索到的数据时出现错误：

$http({
  ... 
})
.then(
  function (result) {
    console.log(result);
    //Line below is not invoked as result.data != "Exception"
    if (result.data == "Exception") {
        ... 
    }
    else {
        ...
        //This assignes result.data to GetCustomer in scope 
        //and at late stage of processing retrieved data rose exception... 
        $scope.GetCustomer = result.data;
    }
  }, 
  function (reason) { //This code is not invoking as http.resultCode="200" ("OK")
    ...
  }
);

【讨论】：

那么为什么会出现状态代码 200，因为我在控制器中没有传递 URL 的方法名称，所以应该调用状态代码 404 na
@abbasarman “为什么是状态码 200？”简单的答案，糟糕的网站，应该返回一个 404 状态码，但它没有。在您的屏幕截图中，您可以看到它返回 200（OK 状态代码）
劣质网站意味着什么？
我没有提到我通过在 web.config 文件中执行 'customError mode=on' 并重定向到我自己的错误页面来使用自定义错误页面，这就是为什么在这里获取该页面的 html 代码数据和状态代码 200，当我评论说然后按照我的预期得到，即 404。那么如何管理这两个？

【解决方案2】：

@ShashankVivek 100% 正确，您的服务器在调用无效端点时应该返回 HTTP_NOT_FOUND (404) 错误。

在服务器端解决问题之前，您可以验证返回的结果不包含表明它是HTML文档而不是JSON文档的模式，例如<DOCTYPE html>

$http({
  method: "GET",
  url: "/Admin/Dashboard/GetDetai",
  headers: { "Content-Type": "application/json" },
}).then(
  function (result) {
    // hack to check if an error occurred on server-side
    if(/<!DOCTYPE html>/.test(result)) {
      throw new Error({status: 500});
    } // end of hack
    ...
  },
  function (reason) {
    if (reason.status == "404") {
      growl.warning("Connection lost.", { title: "Warning!" });
    } else if (reason.status == "505") {
      growl.warning("Invalid Methode/Url.", { title: "Warning!" });
    }
  }
);

【讨论】：

我没有提到我通过在 web.config 文件中执行 'customError mode=on' 并重定向到我自己的错误页面来使用自定义错误页面，这就是为什么在这里获取该页面的 html 代码数据和状态码 200，当我评论时，然后按照我的预期得到，即 404。那么如何管理这两个？
如果您现在收到 404，您的代码必须传递给错误函数，原因是？
是的，它传递到错误中，但我也需要那个自定义错误页面，通过它我可以捕获页面未找到和服务器错误等，所以当我使用这个自定义页面错误时，角度 http 没有进入误差函数