如何在 Javascript 中检测 XMLHttpRequest()的交叉起源(CORS)错误与其他类型错误

为了区分 CORS 冲突和其他失败的 AJAX 请求，可以使用 服务器端代码服务器端代码检查 HEAD 请求的响应头，并将结果传递回客户端页面。例如，如果 AJAX 请求失败(状态0) ，您可以调用这个脚本(我们称之为 cors.php) ，并确切地知道响应头是否包含 Access-Control-*头。

例子:

译自: 美国《科学》杂志网站(http://ip.jsontest.com)
译自: 美国《科学》杂志网站(http://www.google.com)
Url = http://10.0.0.1

报税表

HTTP/1.1200 OK 访问控制-允许-起源: *
发现 HTTP/1.1302
无效请求

Php -根据需要进行定制

<?php /* cors.php */
$url = $_GET["url"];
if(isset($url)) {
$headers = getHeaders($url);
header("Access-Control-Allow-Origin: *");


if(count($headers) == 0) {
die("Invalid request"); // cURL returns no headers on bad urls
} else {
echo $headers[0];       // echo the HTTP status code
}


// Include any CORS headers
foreach($headers as $header) {
if(strpos($header, "Access-Control") !== false) {
echo " " . $header;
}
}
}


function getHeaders($url, $needle = false) {
$headers = array();
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 4);        // Timeout in seconds
curl_setopt($ch, CURLOPT_TIMEOUT, 4);               // Timeout in seconds
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_VERBOSE, true);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'HEAD');    // HEAD request only
curl_setopt($ch, CURLOPT_HEADER, true);
curl_setopt($ch, CURLOPT_HEADERFUNCTION, function($curl, $header) use(&$headers) {
array_push($headers, $header);
return strlen($header);
});
curl_exec($ch);
return $headers;
} /* Drakes, 2015 */

客户端测试工具:

function testCORS(url, $elem) {
$.ajax({
url: url,
timeout: 4000
})
.fail(function(jqXHR, textStatus) {
if(jqXHR.status === 0) {
// Determine if this was a CORS violation or not
$.ajax({
context: url,
url: "http://myserver.com/cors.php?url=" + escape(this.url),
})
.done(function(msg) {
if(msg.indexOf("HTTP") < 0) {
$elem.text(url + " - doesn't exist or timed out");
} else if(msg.indexOf("Access-Control-Allow-Origin") >= 0) {
$elem.text(url + " - CORS violation because '" + msg + "'");
} else {
$elem.text(url + " - no Access-Control-Allow-Origin header set");
}
});
} else {
// Some other failure (e.g. 404), but not CORS-related
$elem.text(url + " - failed because '" + responseText + "'");
}
})
.done(function(msg) {
// Successful ajax request
$elem.text(this.url + " - OK");
}); /* Drakes, 2015 */
}

安全带驾驶员:

// Create a div and append the results of the URL calls
$div = $("<div>");
$("body").append($div);


var urls = ["http://ip.jsontest.com", "http://google.com", "http://10.0.0.1"];
urls.map( function(url) {
testCORS(url, $div.append("<h4>").children().last());
});

结果:

Http://ip.jsontest.com-OK

Http & # 58;//google.com-没有访问控制-允许-起源头集

Http://10.0.0.1-不存在或超时

也许以防万一它帮助任何人... 另一种方法处理之间的差异和网络错误... 可以与铬或火狐... (虽然不是完美的解决方案)

var external = 'your url';


if (window.fetch) {
// must be chrome or firefox which have native fetch
fetch(external, {'mode':'no-cors'})
.then(function () {
// external is reachable; but failed due to cors
// fetch will pass though if it's a cors error
})
.catch(function () {
// external is _not_ reachable
});
} else {
// must be non-updated safari or older IE...
// I don't know how to find error type in this case
}

令人惊讶的是，您可以对图像这样做(也许对于其他特定的内容类型也有类似的解决方案)。窍门是显然不考虑 CORS，因此语句 “ url 未能通过 XHR 加载 & url 成功通过 img src 加载”暗示 URL 可以工作，但 CORS 被阻塞。

这当然不是在所有情况下都有帮助，但是在某些情况下(例如，如果正确传递 CORS，实用程序检测)它可能会起作用。例如，如果我的应用程序(单独的前端和后端)安装了正确配置的后端 URL 并且在服务器上错误配置了 CORS，我想在控制台中触发一个警告，所以这对我来说已经足够完美了，因为我可以提供一个图像来测试它。

function testCors(url) {
var myRequest = new XMLHttpRequest();
myRequest.open('GET', url, true);
myRequest.onreadystatechange = () => {
if (myRequest.readyState !== 4) {
return;
}
if (myRequest.status === 200) {
console.log(url, 'ok');
} else {
var myImage = document.createElement('img');
myImage.onerror = (...args) => {console.log(url, 'other type of error', args);}
myImage.onload = () => {console.log(url, 'image exists but cors blocked');}
myImage.src = url;
console.log(url, 'Image not found');
}
};
myRequest.send();
}

下面是我所做的——尽管它确实需要您对远程服务器进行更改(向其添加页面)。

1. 我创建了一个 probe.html 页面，在 iframe 中提供服务(在您试图使用 CORS 联系的远程原点上)
2. 我在页面中注册了一个 window.onmessage 处理程序
3. 我使用一个安全的 iframe 将 probe.html 页面加载到页面中
4. 在 iframe onload 事件的页面中，我使用 window.postMessage ()向 iframe 发送一条消息
5. Probe.html 页面探测 url (来自 iframe 中的相同原点)
6. Probe.html 页面使用 window.postMessage ()向我发送 xhr.status 和 xhr.statusText 响应细节
7. 如果状态是错误的，我将状态和 statusText 记录到我们的日志服务

但是，要注意，如果以任何一种方式传递参数(任何人都可以嵌入您的 iframe，其他各方都可能导致向页面或 iframe 发送 postMessage) ，那么很难保证它的安全性。

而且它并不完美(它只检测非短暂的一次性错误)。

然而，尽管工作量很大，但是您可以获得有关错误原因的更多信息。当您不能直接访问用户的浏览器时，这非常有用。

PS: 这完全不同于 PHP 的答案，PHP 建议您的服务器应该与远程服务器通信(a) ，这不是很多用于诊断通信故障的原因，和(b)使用 curl 从 PHP 只是要求您的服务器严重受损！