I'm trying to detect when an XMLHttpRequest() fails due to a Cross Origin Error as opposed to a bad request. For example:
ajaxObj=new XMLHttpRequest()
ajaxObj.open("GET", url, true);
ajaxObj.send(null);
Consider 4 cases for url:
Case 1: url is a valid address where access-control-allow-origin is properly set
- Example:
http://192.168.8.35 where I have a server with Access-Control-Allow-Origin: * set in the header
- This is easy to detect as ajaxObj.readyState==4 and ajaxObj.status==200
Case 2: url is an invalid address at an existing server
- Example:
http://xyz.google.com where the server responds but it is not a valid request
- This results in ajaxObj.readyState==4 and ajaxObj.status==0
Case 3: url is to a non-existing server ip address
- Example:
http://192.168.8.6 on my local network where there is nothing to respond
- This results in ajaxObj.readyState==4 and ajaxObj.status==0
Case 4: url is a valid address where access-control-allow-origin is NOT set
- Example:
http://192.168.8.247 where I have a server without Access-Control-Allow-Origin: * set in the header
- This results in ajaxObj.readyState==4 and ajaxObj.status==0
The problem is: How do I differentiate Case 4 (access-control-allow-origin error) and Cases 2&3?
In Case 4, the Chrome debug console shows the error:
XMLHttpRequest cannot load http://192.168.8.247/. Origin http://localhost is not allowed by Access-Control-Allow-Origin.
How do I make that error known in Javascript?
I tried to find some indication in ajaxObj but nothing there seems to be different compared to Case 2&3.
Here is a simple test I used:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CORS Test</title>
<script type="text/javascript">
function PgBoot()
{
// doCORS("http://192.168.8.35"); // Case 1
// doCORS("http://xyz.google.com"); // Case 2
doCORS("http://192.168.8.6"); // Case 3
// doCORS("http://192.168.8.247"); // Case 4
}
function doCORS(url)
{
document.getElementById("statusDiv").innerHTML+="Processing url="+url+"<br>";
var ajaxObj=new XMLHttpRequest();
ajaxObj.overrideMimeType('text/xml');
ajaxObj.onreadystatechange = function()
{
var stat=document.getElementById("statusDiv");
stat.innerHTML+="readyState="+ajaxObj.readyState;
if(ajaxObj.readyState==4)
stat.innerHTML+=", status="+ajaxObj.status;
stat.innerHTML+="<br>";
}
ajaxObj.open("GET", url, true);
ajaxObj.send(null);
}
</script>
</head>
<body onload="PgBoot()">
<div id="statusDiv"></div>
</body>
</html>
Results using Chrome:
Processing url=http://192.168.8.35
readyState=1
readyState=2
readyState=3
readyState=4, status=200
Processing url=http://xyz.google.com
readyState=1
readyState=4, status=0
Processing url=http://192.168.8.6
readyState=1
readyState=4, status=0
Processing url=http://192.168.8.247
readyState=1
readyState=4, status=0
See Question&Answers more detail:
os 
