How to check for No 'Access-Control-Allow-Origin' header error

Question

When using XMLHttpRequest in JavaScript, is it possible to distinguish between the following two errors (GET completely failed / No 'Access-Control-Allow-Origin' header)?

Obviously, readyState and status of the XMLHttpRequest object don't differ. I tried to use window.onerror to catch all errors but apparently, these two errors do not trigger the callback function.

Answer 1

Your best course of action would be to prevent this error from even occurring in the first place. By making sure the server adds the domain you're trying to access from your script to the Access-Control-Allow-Origin setting you don't have to deal with it client-side.

That said, you should be able to attach a handler to the error event of the XMLHttpRequest object. Using the error message you might be able determine what went wrong; but that is of lesser interest. It doesn't matter to the client what went wrong, only that it isn't going to get it's data, so you can plan accordingly.

var oReq = new XMLHttpRequest();

oReq.addEventListener("error", transferFailed);

oReq.open();

function transferFailed(evt) {
  console.log("An error occurred while transferring the file.");
}

More information: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Asynchronous_request