javascript - 获取到 https :www. google.com 的请求失败(显然)与 CORS

Question

我的用例:我正在尝试向 https://www.google.com 发出一个简单的 fetch GET 请求检查互联网连接。我需要检查响应代码，并据此确定用户是否有互联网连接。现在，虽然我可以在开发人员工具中看到 200 代码(没有响应 header 或响应)，但 fetch 始终无法进入 fetch 调用的错误处理程序，并且控制台会标记 CORS 错误。

我确实理解，因为我正在发出跨源请求，所以这应该会导致 CORS 错误。

我想知道我可以做些什么来让我的连接代码正常工作。我显然无法更改 google.com 的响应 header 。为此使用 google.com 的原因是因为它的可靠性，就像我们在浏览器中点击 google.com 主要是为了检查互联网是否正常工作:D

我的代码:

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:我知道没有办法禁用同源策略或强制其他站点发送允许所有源头。这可以通过使用 cors 代理绕过。
我想知道是否可以通过我的方式使用 google.com 或类似的现成网站来验证连接，如果没有，那么从仅获取连接信息的 Angular 来看，是否有其他方法来处理它们。

Answer 1

您可以添加一些 parameters到您的 fetch 请求及其 init 对象。
与 mode 属性设置为 no-cors ，您可以向 URL 发送 GET 和 HEAD 请求，但无法访问响应。

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

另外，我会考虑发送 HEAD 请求，因为您不想使用响应正文