获取在浏览器控制台中看到的XMLHttpRequest连接状态

2024-05-19 • 问答

我想检查XMLHttpRequest是否可以访问网站。我写了一个JS函数：UrlExsists(url);尝试建立连接。

function UrlExists(url) {
    var http = new XMLHttpRequest();
    http.open('HEAD',url,false);
    http.send();

    if (http.status != 404) {
        console.log("did work:" + url)
    } else {
        console.log("did not work:" + url)
    }
};

当我进入浏览器控制台并按如下所示调用函数时：UrlExsists("https://www.google.com/");，控制台中将显示以下内容：

“ XHR HEAD https://www.google.com/ [HTTP / 2.0 200 OK 668ms]”

但是由于“跨域请求被阻止”而失败，并且发生网络错误。 => img as reference

如果我打UrlExsists("https://www.google.com/test");，将显示以下内容：

“ XHR HEAD https://www.google.com/test [找不到HTTP / 2.0 404 0ms]”

再次出现“跨域请求被阻止”和网络错误。 => img as reference

现在这些状态代码404和200正是我想要的，但是如何在javascript中获取它们，以确定给定的网站是否可用？

如果我走错了路，也许有人可以向我点头吗？

由于CORS错误而无法执行（如果跨域资源共享https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS未启用该脚本，则您无权加载其他站点的脚本）。您只是无法获取信息，甚至无法获取HTTP响应代码。

我看到的唯一解决方法是将CSS请求附加到DOM。并检查css是否成功加载。但这不是一个通用的解决方案，您需要选择一些CSS类并检查它是否已加载。另外，您还需要使用HTML元标记禁用缓存。

您还可以动态添加css链接标记（描述：https://gist.github.com/chrisyip/1403858）

<link rel="stylesheet" type="text/css" href='https://mysite/custom.css'>

在自定义CSS中，您需要一些独特的类，例如：

.url-exists {
}

然后经过一些延迟（例如3-5秒超时），您检查css是否已成功加载：

function verifyStyle(selector) {
    var rules;
    var haveRule = false;

    if (typeof document.styleSheets != "undefined") {   //is this supported
        var cssSheets = document.styleSheets;

        outerloop:
        for (var i = 0; i < cssSheets.length; i++) {

             //using IE or FireFox/Standards Compliant
            rules =  (typeof cssSheets[i].cssRules != "undefined") ? cssSheets[i].cssRules : cssSheets[i].rules;

             for (var j = 0; j < rules.length; j++) {
                 if (rules[j].selectorText == selector) {
                         haveRule = true;
                        break outerloop;
                 }
            }//innerloop

        }//outer loop
    }//endif

    return haveRule;
}//eof

var ok = verifyStyle(".url-exists");

如果变量ok为true，则可以访问给定的URL（https://mysite/）。

我认为，我找到了解决问题的方法。提取API似乎正是我想要的。 https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

我按照Kaiido的指示接受了回答：

Check if online resource is reachable with JavaScript,not requiring the The Same Origin Policy to allow it

获取在浏览器控制台中看到的XMLHttpRequest连接状态

zjd1987zjd 回答：获取在浏览器控制台中看到的XMLHttpRequest连接状态

大家都在问