Jak wykryć błąd pochodzenia krzyżowego (CORS) w porównaniu z innymi typami błędów XMLHttpRequest () w JavaScript
Próbuję wykryć, kiedy XMLHttpRequest () nie powiedzie się z powodu błędu pochodzenia krzyżowego, w przeciwieństwie do złego żądania. Na przykład:
ajaxObj=new XMLHttpRequest()
ajaxObj.open("GET", url, true);
ajaxObj.send(null);
Rozważ 4 przypadki dla adresu URL:
Przypadek 1: url to prawidłowy adres, na którym poprawnie ustawiono kontrolę dostępu-zezwolenie-pochodzenie
Przykład:http://192.168.8.35 gdzie mam serwerAccess-Control-Allow-Origin: * ustawić w nagłówkuJest to łatwe do wykrycia jako ajaxObj.readyState == 4 i ajaxObj.status == 200Przypadek 2: url jest nieprawidłowym adresem na istniejącym serwerze
Przykład:http://xyz.google.com gdzie serwer odpowiada, ale nie jest to poprawne żądaniePowoduje to ajaxObj.readyState == 4 i ajaxObj.status == 0Przypadek 3: adres URL to nieistniejący adres IP serwera
Przykład:http://192.168.8.6 w mojej sieci lokalnej, gdzie nie ma nic do odpowiedziPowoduje to ajaxObj.readyState == 4 i ajaxObj.status == 0Przypadek 4: url to prawidłowy adres, pod którym znajduje się kontrola dostępu-zezwolenie-pochodzenieNIE zestaw
Przykład:http://192.168.8.247 gdzie mam serwerbez Access-Control-Allow-Origin: * ustawić w nagłówkuPowoduje to ajaxObj.readyState == 4 i ajaxObj.status == 0Problemem jest:W jaki sposób odróżnić Przypadek 4 (błąd kontroli dostępu-zezwolenia-pochodzenia) od Przypadków 2 i 3?
W przypadku 4 konsola debugowania Chrome wyświetla błąd:
XMLHttpRequest cannot load http://192.168.8.247/. Origin http://localhost is not allowed by Access-Control-Allow-Origin.
Jak zrobić ten błąd w JavaScript?
Próbowałem znaleźć jakieś wskazówkiajaxObj ale nic nie wydaje się być inne niż w przypadku 2 i 3.
Oto prosty test, którego użyłem:
<!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>
Wyniki za pomocą 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