如何处理 CORS 错误代码？

Question

编辑：我刚刚意识到这是Recommended solution for AJAX, CORS, Chrome & HTTP error codes (401,403,404,500) 的副本，他尝试了我最后提出的想法。但我不知道他是否成功了（笨蛋用户？），没有其他人发布解决方案甚至评论，所以我认为值得寻找新的答案。

问题：

• 我发送了一个正确执行的（编辑：IMproperly-executed。故事结束...）CORS 请求。
• 服务器收到请求并尝试处理它。
• 服务器返回错误响应，例如422 Unprocessable Entity，以及有关错误的 JSON 信息。这个想法是我的应用可以接收此错误信息并在 UI 中适当地处理它。
• 浏览器阻止我的错误处理程序获取响应内容，甚至获取状态码。

显示浏览器收到401 状态码，但将其视为 CORS 安全错误：

响应对象，显示我的代码无法访问响应数据（data: ""，status: 0）：

其他人是如何处理这个限制的？我现在最好的猜测是劫持 HTTP “成功”代码 (2XX) 作为错误代码，然后在响应中包含错误信息。这使我无法以正常方式使用 ajax 错误处理程序，但我还是将其作为全局 ajax 过滤器处理，因此此过滤器将捕获异常成功代码并触发错误处理程序。

Answer 1

控制台消息表明服务器在发送 401 响应代码时未发送所需的 Access-Control-Allow-Origin 标头。

除非您修复该问题，否则您将无法使用 CORS 错误处理程序将内容注入 DOM。

服务器很可能在响应代码为 200 的响应中正确发送标头。但是，如果您希望使用来自这些响应代码的数据，则需要对其他响应代码执行此操作。

在客户端做出设计妥协之前，先在服务器端修复该问题。这可能会立即解决您的问题。

Answer 2

这似乎是一个不透明的响应，您无法获取标头或响应。并且所有内容都设置为 null 或为空。

https://developer.mozilla.org/en-US/docs/Web/API/Response/type

或者也许你应该在服务器中添加：

Access-Control-Allow-Origin: *

Answer 3

答案很晚，但如果有人想检查在发送XMLHttpRequest 时是否发生错误，然后采取适当的措施（在客户端），那么这是一个快速的解决方法：

try{
    request.send();
}catch(err){
    if(e.toString().startsWith("NetworkError")){
        //pasre the string to check error code
        //and take appropriate actions
    }
}

这是必需的，因为onreadystatechange 函数不会在NetworkError 发生时执行，实际上整个脚本已终止。