Cómo detectar errores de origen cruzado (CORS) frente a otros tipos de errores para XMLHttpRequest () en Javascript
Estoy tratando de detectar cuando un XMLHttpRequest () falla debido a un error de origen cruzado en lugar de una solicitud incorrecta. Por ejemplo:
ajaxObj=new XMLHttpRequest()
ajaxObj.open("GET", url, true);
ajaxObj.send(null);
Considere 4 casos para url:
Caso 1: url es una dirección válida donde access-control-allow-origin está correctamente configurado
Ejemplo:http://192.168.8.35 donde tengo un servidor conAccess-Control-Allow-Origin: * establecer en el encabezadoEsto es fácil de detectar como ajaxObj.readyState == 4 y ajaxObj.status == 200Caso 2: url es una dirección no válida en un servidor existente
Ejemplo:http://xyz.google.com donde el servidor responde pero no es una solicitud válidaEsto da como resultado ajaxObj.readyState == 4 y ajaxObj.status == 0Caso 3: url es a una dirección IP del servidor no existente
Ejemplo:http://192.168.8.6 en mi red local donde no hay nada que responderEsto da como resultado ajaxObj.readyState == 4 y ajaxObj.status == 0Caso 4: url es una dirección válida donde access-control-allow-origin esNO conjunto
Ejemplo:http://192.168.8.247 donde tengo un servidorsin Access-Control-Allow-Origin: * establecer en el encabezadoEsto da como resultado ajaxObj.readyState == 4 y ajaxObj.status == 0El problema es:¿Cómo puedo diferenciar el caso 4 (error de acceso-control-permitir-origen) y los casos 2 y 3?
En el caso 4, la consola de depuración de Chrome muestra el error:
XMLHttpRequest cannot load http://192.168.8.247/. Origin http://localhost is not allowed by Access-Control-Allow-Origin.
¿Cómo hago para que se conozca ese error en Javascript?
Traté de encontrar alguna indicación enajaxObj pero nada parece ser diferente en comparación con los casos 2 y 3.
Aquí hay una prueba simple que utilicé:
<!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>
Resultados utilizando 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