Fetch request to https:www.google.com fails (obviously) with CORS

Question

My usecase : I am trying to make a simple fetch GET request to https://www.google.com to check for the internet connectivity. I need to check the response code and depending upon that, decide if user is having internet connectivity. Now though I can see a 200 code (with no response headers or response) in the developer tools, the fetch always fails landing into the error handler for the fetch call and the console flags the CORS error.

I do understand since I am making a cross origin request so this should lead to CORS error.

I want to know what can I do to get my connectivity code working. I can't obviously alter google.com's response headers. The reason for using google.com for this is because of it's reliability, just like we hit google.com in browser mostly to check if internet is working or not :D

My code :

networkMonitor: () => {
      const headers = new Headers();
      headers.append('Cache-Control', 'no-cache');
      const timerId = setInterval(() => {
        fetch('https://www.google.com')
          .then((response) => {
            if (response.status != 200) {
               // Yay ! connected
            }
          }, (err) => {
            console.log("error: " + err); // (currently fetch failed)
          })
      }, 5000);
    }

P.S : I know there is no way to disable the same origin policy or force the other site to send the allow all origin headers. This can though be bypassed by using a cors proxy. I want to know that can google.com or similar readily available sites be used to verify connectivity by my way or not, and if not, then is there some other way to deal with them from the point of view of just getting connectivity information.

somewhat related, I suggest you use http://connectivitycheck.gstatic.com/generate_204 instead. Also made by Google, but created to check if you have a valid connection. Make sure to compare against status code 204. Fetching google.com returns unnecessary data and takes 90ms, whereas gstatic returns nothing and takes 30ms — Zun
– Zun, Commented Oct 23, 2019 at 8:19
If you can find any publicly available Google “endpoint” that is CORS-enabled, and you want to assume that has the same “reliability” as the Google main page, then you could use that. Otherwise, there is not much you can do - because the general “workaround” of using a CORS proxy would of course put a large part of that “reliability” response onto the proxy to begin with. — 04FS
– 04FS, Commented Oct 23, 2019 at 8:24

ikarasz · Accepted Answer · 2019-10-23 08:39:40Z

4

You can add some parameters to your fetch request with its init object. With the mode property set to no-cors, you can send GET and HEAD requests to the URL but you cannot access the response.

networkMonitor: () => {
  const headers = new Headers();
  headers.append('Cache-Control', 'no-cache');
  const timerId = setInterval(() => {
    fetch('https://www.google.com', {
      mode: 'no-cors'
    })
    .then((response) => {
      if (response.status != 200) {
        console.log('Yay ! connected')
      }
    }, (err) => {
      console.log('error: ' + err); 
  }, 5000);
}

Also, I would consider sending a HEAD request since you don't want to use the response body

edited Oct 23, 2019 at 8:39

answered Oct 23, 2019 at 8:11

ikarasz

2712 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

tariq Over a year ago

That won't help. no-cors just tells the browser to block the javascript code from looking at the contents of response body and headers. By no way can same-origin-policy be disabled from the client side except locally may be by using some extensions or flags etc.

ikarasz Over a year ago

@tariq of course you cannot access the response, but it won't fail because of the cors. It will rejects only if you are not connected to the network.

ikarasz Over a year ago

@tariq it works on my own website, you should try it

tariq Over a year ago

interesting. I had tried using this earlier also but wasn't working then. It is working now ! Let me confirm more and then will accept your answer.

tariq Over a year ago

+1, answer accepted for my narrow use case of just getting connectivity status or status code with success. I don't need response headers or response body. Had that been the case then no-cors would not have been of any help.

PaulShovan · Accepted Answer · 2019-10-23 08:45:33Z

0

You can use offline.js for this task. It has different ways to check connection status.

Offline.check(): Check the current status of the connection.

Offline.state: The current state of the connection 'up' or 'down'

Please note that this repo is not maintained properly.

github link is here

answered Oct 23, 2019 at 8:45

PaulShovan

2,1321 gold badge14 silver badges22 bronze badges

Comments

Alex Vovchuk · Accepted Answer · 2022-06-15 23:24:35Z

0

As an alternative you can use CDN links with disabled cors. Like:

fetch("https://code.jquery.com/jquery-2.2.4.min.js")
    .then(x => x.text())
    .then(x => console.log(x.substring(4, 15) === "jQuery v2.2"))

answered Jun 15, 2022 at 23:24

Alex Vovchuk

2,9664 gold badges23 silver badges43 bronze badges

Comments

Philip · Accepted Answer · 2019-10-23 08:39:40Z

-1

You may use https://developer.mozilla.org/en-US/docs/Web/API/Request/mode to set the mode to 'no-cors'. This worked for me. It also might be enough to use a HEAD request instead of a GET to save bandwith.

Be aware of this sentence in the documentation for 'no-cors':

JavaScript may not access any properties of the resulting Response

In my tests here the response object is simply empty. A check on response.status or response.ok fails.

fetch('https://www.google.com', {
    method: 'HEAD',
    mode: 'no-cors'
  })
  .then((response) => {
    console.log("connected");
  }, (err) => {
    console.log("error: " + err); // (currently fetch failed)
  })

edited Oct 23, 2019 at 8:39

answered Oct 23, 2019 at 8:32

Philip

944 bronze badges

Comments

Quentin · Accepted Answer · 2019-10-23 08:26:52Z

-2

I want to know that can google.com or similar readily available sites be used to verify connectivity by my way or not, and if not, then is there some other way to deal with them from the point of view of just getting connectivity information.

No, there isn't.

As you have already determined, you need CORS permission to do that.

answered Oct 23, 2019 at 8:26

community wiki

Quentin

Collectives™ on Stack Overflow

Fetch request to https:www.google.com fails (obviously) with CORS

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related