能否用JS/HTML实现无后端众包监测OtherSite.com可用性？

可行性与跨域限制 #

Great question! 答案是可以实现，但需要绕开浏览器的同源策略限制。

浏览器的同源策略会阻止前端脚本直接向不同域的站点发送AJAX请求（比如fetch或XMLHttpRequest）并读取响应，除非目标站点（OtherSite.com）主动配置了CORS（跨域资源共享）规则允许你的MySite.com访问。但我们可以利用浏览器的一个特性：<img>、<script>这类资源加载标签不受同源策略的读取限制——虽然无法获取响应内容，但能通过加载成功/失败的事件，判断目标站点是否可达。

核心思路 #

1. 当用户访问MySite.com时，前端脚本尝试加载OtherSite.com上的一个轻量资源（比如favicon.ico这类几乎所有站点都有的小图标，或者一个空的JS文件）。
2. 监听资源的onload（请求成功，说明站点上线）和onerror（请求失败，站点可能下线）事件。
3. 将监测结果通过同源请求发送回MySite——如果MySite是静态站点，你可以用图片标签发起GET请求到统计端点（比如静态站点服务商的无服务器函数，甚至第三方日志服务），无需自己维护后端。

代码示例 #

下面是一个基础的实现，包含监测逻辑和结果上报（假设你有一个简单的上报端点，或用静态站点日志记录请求）：

<!DOCTYPE html>
<html>
<head>
    <title>MySite - 众包监测</title>
</head>
<body>
    <h1>欢迎来到MySite</h1>
    <script>
        // 要监测的目标资源（选一个OtherSite上肯定存在的轻量资源）
        const targetResource = "https://othersite.com/favicon.ico";
        // 上报结果的MySite端点（同源，无跨域问题）
        const reportEndpoint = "https://mysite.com/log-status";

        // 创建隐藏的img标签发起监测请求
        const monitorImg = new Image();
        monitorImg.style.display = "none";

        // 资源加载成功：判定OtherSite在线
        monitorImg.onload = () => {
            console.log("✅ OtherSite is up!");
            sendReport("up");
        };

        // 资源加载失败：判定OtherSite可能离线（也可能是网络/资源问题）
        monitorImg.onerror = () => {
            console.log("❌ OtherSite is down!");
            sendReport("down");
        };

        // 发起请求，加时间戳避免浏览器缓存旧结果
        monitorImg.src = `${targetResource}?t=${Date.now()}`;

        // 上报结果到MySite
        function sendReport(status) {
            // 用img标签发起GET请求，无需处理响应，避免跨域问题
            const reportImg = new Image();
            reportImg.src = `${reportEndpoint}?status=${status}&target=${encodeURIComponent(targetResource)}&t=${Date.now()}`;
        }
    </script>
</body>
</html>

关键注意事项 #

• 避免缓存：一定要加?t=${Date.now()}参数，防止浏览器缓存之前的请求结果，导致监测数据不准确。
• 误判风险：onerror可能由用户网络问题、资源被移除等原因触发，不一定是OtherSite真的下线。建议结合多个资源监测，或增加重试逻辑降低误判。
• 合规性：如果收集用户的监测数据，要符合隐私法规（比如GDPR），提前告知用户并获得同意。
• CORS特例：如果OtherSite主动配置了CORS允许MySite访问，你也可以直接用fetch请求，这样能获取HTTP状态码等更详细的信息，但这种情况比较少见。

内容的提问来源于stack exchange，提问作者Aviad Rozenhek