捕获 XMLHttpRequest 跨域错误答案

【问题标题】：Catching XMLHttpRequest cross-domain errors捕获 XMLHttpRequest 跨域错误
【发布时间】：2011-06-28 11:04:54
【问题描述】：

在发出请求时，有什么方法可以捕获由Access-Control-Allow-Origin 引起的错误？我正在使用 jQuery，并且在 .ajaxError() 中设置的处理程序永远不会被调用，因为请求永远不会开始。

有什么解决办法吗？

【问题讨论】：

可能有用的信息：Detecting Errors with XMLHttpRequest

标签： javascript jquery xmlhttprequest cross-domain cors

【解决方案1】：

对于 CORS 请求，应该触发 XmlHttpRequest 的 onError 处理程序。如果您有权访问原始 XmlHttpRequest 对象，请尝试设置事件处理程序，例如：

function createCORSRequest(method, url){
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr){
    xhr.open(method, url, true);
  } else if (typeof XDomainRequest != "undefined"){
    xhr = new XDomainRequest();
    xhr.open(method, url);
  } else {
    xhr = null;
  }
  return xhr;
}

var url = 'YOUR URL HERE';
var xhr = createCORSRequest('GET', url);
xhr.onerror = function() { alert('error'); };
xhr.onload = function() { alert('success'); };
xhr.send();

注意几点：

在 CORS 请求中，浏览器的 console.log 将显示一条错误消息。但是，该错误消息不适用于您的 JavaScript 代码（我认为这是出于安全原因，我之前曾问过这个问题：Is it possible to trap CORS errors?）。
xhr.status 和 xhr.statusText 未在 onError 处理程序中设置，因此对于 CORS 请求失败的原因，您并没有任何有用的信息。你只知道它失败了。

【讨论】：

啊，但是您如何区分由 CORS 限制引起的错误和其他未指定的 AJAX 错误？由于 CORS 而失败的 XMLHttpRequest 对象的 readyState、status 和 statusText 属性似乎没有任何可辨别的地方。
我不认为这是可能的，看到这个问题：stackoverflow.com/questions/4844643/…
XDomainRequest 已弃用

【解决方案2】：

可能会出现这样的错误状态：

xhr.onerror = function(e) {
    alert("Error Status: " + e.target.status);
};

来源：https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

【讨论】：

-1 我在您的参考中没有看到类似的内容，实际上onError 中应该没有状态代码。 onError 仅在网络故障时触发，并且如果您有一个状态码，则表示响应已成功接收。

【解决方案3】：

为 onerror 设置处理程序，您将能够捕获跨域异常。我不知道为什么会针对异常触发 onerror 事件而不是 error 事件，但我只是对其进行了测试并且它有效。

req = $.get('http://www.example.com');
req.onerror = function() { alert('An exception occurred.') };

【讨论】：

js就是这样工作的，req.onerror = function () {..}相当于req.addEventListener('error', function () {..})