获取浏览器控制台中所见的 XMLHttpRequest 连接状态

Question

我想检查是否可以使用 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 Not Found 0ms]”

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

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

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

Answer 1

我想，我找到了解决问题的方法。 fetch 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

Answer 2

由于 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/)。