如何发送一个不透明的http请求到google.com与无cors?

    fetch('https://google.com', {
        method: 'GET', // *GET, POST, PUT, DELETE, etc.
        mode: 'no-cors',
    }).then((result) => {
        console.log(result)
    }).catch(e => {
        console.error(e)
    })

设置no-cors的原因是，即使在我的pc上取消网络连接时，我也收到了cors错误。所以不管有没有网络连接，我都被封锁了。添加no-cors使请求不透明，这显然似乎绕过cors，并允许我只是简单地检查我是否可以连接到谷歌。

供参考:我在这里使用fetch进行http请求。 https://www.npmjs.com/package/fetch

几乎所有主流浏览器现在都支持window.navigator. online属性，以及相应的在线和离线窗口事件。运行以下代码片段来测试它:

console.log('Initially ' + (window.navigator.onLine ? 'on' : 'off') + 'line'); window.addEventListener('online', () => console.log('Became online')); window.addEventListener('offline', () => console.log('Became offline')); document.getElementById('statusCheck').addEventListener('click', () => console.log('window.navigator.onLine is ' + window.navigator.onLine)); <button id="statusCheck">Click to check the <tt>window.navigator.onLine</tt> property</button><br /><br /> Check the console below for results:

尝试将您的系统或浏览器设置为离线/在线模式，并检查日志或window.navigator.onLine属性的值变化。

请注意Mozilla文档中的这段话:

In Chrome and Safari, if the browser is not able to connect to a local area network (LAN) or a router, it is offline; all other conditions return true. So while you can assume that the browser is offline when it returns a false value, you cannot assume that a true value necessarily means that the browser can access the internet. You could be getting false positives, such as in cases where the computer is running a virtualization software that has virtual ethernet adapters that are always "connected." Therefore, if you really want to determine the online status of the browser, you should develop additional means for checking. In Firefox and Internet Explorer, switching the browser to offline mode sends a false value. Until Firefox 41, all other conditions return a true value; since Firefox 41, on OS X and Windows, the value will follow the actual network connectivity.

(重点是我自己的)

这意味着如果window.navigator.onLine为false(或者您得到一个脱机事件)，则保证您没有Internet连接。

然而，如果它是真的(或者你得到一个在线事件)，它充其量只意味着系统连接到某个网络。这并不意味着你可以上网。要检查这一点，您仍然需要使用其他答案中描述的解决方案之一。

我最初打算把这篇文章作为格兰特·瓦格纳(Grant Wagner)的回答的更新，但这似乎太过编辑了，尤其是考虑到2014年的更新已经不是他的了。

导航器等方法的问题。onLine是他们不兼容的一些浏览器和移动版本，一个选项，帮助我很多是使用经典的XMLHttpRequest方法，也预见到可能的情况下，文件存储在缓存响应XMLHttpRequest。Status大于200小于304。

这是我的代码:

 var xhr = new XMLHttpRequest();
 //index.php is in my web
 xhr.open('HEAD', 'index.php', true);
 xhr.send();

 xhr.addEventListener("readystatechange", processRequest, false);

 function processRequest(e) {
     if (xhr.readyState == 4) {
         //If you use a cache storage manager (service worker), it is likely that the
         //index.php file will be available even without internet, so do the following validation
         if (xhr.status >= 200 && xhr.status < 304) {
             console.log('On line!');
         } else {
             console.log('Offline :(');
         }
     }
}

如何发送一个不透明的http请求到google.com与无cors?

    fetch('https://google.com', {
        method: 'GET', // *GET, POST, PUT, DELETE, etc.
        mode: 'no-cors',
    }).then((result) => {
        console.log(result)
    }).catch(e => {
        console.error(e)
    })

设置no-cors的原因是，即使在我的pc上取消网络连接时，我也收到了cors错误。所以不管有没有网络连接，我都被封锁了。添加no-cors使请求不透明，这显然似乎绕过cors，并允许我只是简单地检查我是否可以连接到谷歌。

供参考:我在这里使用fetch进行http请求。 https://www.npmjs.com/package/fetch

我不得不为一个与学校有很多合作的客户制作一个web应用程序(基于ajax)，这些学校的互联网连接经常不好，我使用这个简单的功能来检测是否有连接，工作得非常好!

我使用CodeIgniter和Jquery:

function checkOnline() {
    setTimeout("doOnlineCheck()", 20000);
}

function doOnlineCheck() {
    //if the server can be reached it returns 1, other wise it times out
    var submitURL = $("#base_path").val() + "index.php/menu/online";

    $.ajax({
        url : submitURL,
        type : "post",
        dataType : "msg",
        timeout : 5000,
        success : function(msg) {
            if(msg==1) {
                $("#online").addClass("online");
                $("#online").removeClass("offline");
            } else {
                $("#online").addClass("offline");
                $("#online").removeClass("online");
            }
            checkOnline();
        },
        error : function() {
            $("#online").addClass("offline");
            $("#online").removeClass("online");
            checkOnline();
        }
    });
}

只需使用导航器。如果这是真的，那么你是在线的，否则离线