web-dev-qa-db-ja.com

XMLHttpRequestクロスドメインエラーのキャッチ

リクエストを行うときに_Access-Control-Allow-Origin_によって発生したエラーをキャッチする方法はありますか？私はjQueryを使用していますが、.ajaxError()で設定されたハンドラーが呼び出されません。

回避策はありますか？

javascriptjqueryxmlhttprequestcross-domaincors
22
kpozin

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コードでは使用できません（これはセキュリティ上の理由で行われたと思います。以前にこの質問をしました： CORSエラーをトラップすることは可能ですか？ ）。

  • Xhr.statusとxhr.statusTextはonErrorハンドラーで設定されていないため、CORSリクエストが失敗した理由に関する有用な情報はありません。あなたはそれが失敗したことだけを知っています。

19
monsur

次のようにエラーステータスを取得することが可能です：

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

ソース： https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

6
Vikram Pudi

onerrorのハンドラーを設定すると、クロスドメインの例外をキャッチできるようになります。 onerrorイベントがerrorイベントではなく例外に対して発生する理由はわかりませんが、テストしただけで機能しました。

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