Check If Internet Connection Exists in JavaScript

@kirupa This article was very helpful for me! By the way, I don’t think you need the random to avoid cached results. Because I don’t think a browser would ever return a cached HEAD request as doing so would defeat the point of the HEAD request. See https://stackoverflow.com/questions/21019245/will-an-http-head-request-ever-be-cached-by-phone-browser Unfortunately, I couldn’t find any definite link confirming that no browser would ever cache a HEAD request. However, as the Stack Overflow answer explains, it may make sense for a browser to use the returned HEAD response to update its cache. But it really makes zero sense for a browser to visit its cache when making a new HEAD request.

1 Like

That is a good point! I didn’t know this. I’ll fiddle with this some more and adjust the tutorial :slight_smile:

1 Like

@kirupa Bro, I’m getting this error in the console ‘Access to XMLHttpRequest at ‘https://www.kirupa.com/blank.png?rand=3337’ from origin ‘http://localhost:4200’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.’ and failed response in the network tab. I 'm using in an Angular application and calling the function right before an API call. Please help me out to fulfill the request.

Ah! Thanks for catching that. At some point, something changed on the server, browser settings, or both haha. I have updated the article to reference a URL that doesn’t have CORS enabled: https://i.imgur.com/7ofBNix.png

If you swap the URL with the imgur link, you should be fine :slight_smile:

Cheers,
Kirupa

you should check up the navigator to make the Internet work for your java script. It only determined when you are connected to internet.

@kirupa Hey, and thanks for the clear walk through, that is comprehensible even to a total novice like me :slight_smile:
I’m having problems implementing the code though. It does work with your URL but when I swap it for one on my server it fails me. The server is an apache test server in my own network, and when I type in the the url in the browser it works, but not when I run the html page with the script. Again, only change is the different url. Any ideas?

Does your console display any error?

Well, it gives me a XMLHttpRequest cannot load due to access control checks. This perplexes me, because I’m seemingly able to access a file somewhere on the internet (imgur), but not on my own server within my own local network. Also, the way I understand access control checks, I shouldn’t even be able to access the imgur file in the first place, yet I am.
I’m running the code on a flask server (this was a python project originally) and I won’t have access to the server to check when I deploy this. It will basically be a black box in the local network that I will want to check up status and redirect the browser to in case it is up, and load some localhost html in case it’s down. All the while checking for up status every few seconds. I’ve spend the last 4 days trying to find a workable solution on the web with python, php and now javascript, but nothing seems to work (for different reasons). Frustrating…

You are running into a CORS-related security issue. The server you are accessing can specify whether arbitrary endpoints (aka not a page on the same domain) can call resources on it. Imgur has a permissive CORS policy specified, but the server you are accessing does not. That’s the problem you are running into.

You can use a proxy to fake the CORS permission. You can see how I did that in this example: Checking If A File Exists - #11 by kirupa

Let me know if this works for you!

Cheers,
Kirupa

Interesting solution. Unfortunately it isn’t working here, I still get the same error. Interestingly though it takes 30 sec. for the error to come when using the proxy. I’ve also tried Firefox and Chrome, to no avail. Also when testing it on the heroku demo server, I get a 0 after 30 sec., while any other domain returns within 1 - 2 sec.

Is your other computer accessible from the internet? If not, that’s a mistaken assumption I made. I think cors-anywhere only works on publicly accessible URLs. If it is an internal URL, it probably won’t work since the proxy can’t access the internal content.

Can you add the appropriate CORS settings to your internal server? This article gives a good overview: Cross-Origin Resource Sharing (CORS) - HTTP | MDN

:slight_smile:

So, i’ve went through the linked article but unfortunately I can’t edit the CORS setting. Anyhow, I elected to solve this by starting up chromium with --disable-web-security, since my kiosk browser session has only this one purpose. Thanks so much for your help :slight_smile:

Nice! You are lucky to be able to have the luxury of enabling that setting to disable web security :grinning:

(Now, say that last sentence three times fast!)