0

I want to check, if a website is reachable with XMLHttpRequest. I wrote a JS-function: UrlExsists(url); to try and establish a connection.

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)
    }
};

When i go to my browser console and call the function like so:UrlExsists("https://www.google.com/");, the following is displayed in the console:

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

But It fails due to "Cross-Origin Request Blocked" and a Network Error occurs. = >img as reference

If I call UrlExsists("https://www.google.com/test"); the following is displayed:

"XHR HEAD https://www.google.com/test [HTTP/2.0 404 Not Found 0ms]"

And again "Cross-Origin Request Blocked" and Network Error. = > img as reference

Now these Status codes 404 and 200 are exactly, what i want, but how do i get these in javascript, to determine if the given website is available?

And if I'm on the wrong track, can someone maybe nod me to the right one?

Mardog
  • 1
  • 1
  • https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/status: _“Browsers also report a status of 0 in case of XMLHttpRequest errors.”_ - so this info will not be available to you in case of a CORS error. – 04FS Nov 14 '19 at 11:23

2 Answers2

0

It is not possible due to the CORS error (you have no right to load other site's script, if it is not enable with Cross-Origin Resource Sharing: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS). You just cant get the information, not even the HTTP response code.

The only workaround I see is append to the DOM a css request. And checking if the css successfully loaded. But its not a general solution, you need to pick some css class and check if it is loaded. And also you need to disable the cache with HTML meta tags.

You also can append css link tag dynamically (description: https://gist.github.com/chrisyip/1403858)

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

In the cusom css you need some unique class like:

.url-exists {
}

And after some delay (like 3-5 seconds timeout), you check if the css is successfully loaded:

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");

If the variable ok is true then the given url (https://mysite/) is accessible.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Jung Ervin
  • 358
  • 1
  • 2
  • 8
  • Thank you for your answer, I had no idea you could do something like this. I will definitely look into this a little more, I found a solution to my problem though. The fetch API seems to do the trick. – Mardog Nov 14 '19 at 15:50
0

I think, I found a solution for my problem. The fetch API seems to do just what I want. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

I did as the accepted answer from Kaiido instructed:

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

Mardog
  • 1
  • 1