首页网站可用性检测跳转逻辑失效，求问题排查与优化方案

原代码存在的问题 #

• 跨域限制：浏览器同源策略会阻止XMLHttpRequest请求外部域名（如google.com），这是逻辑失效的核心原因，你可以在浏览器控制台看到CORS相关报错。
• 定时器逻辑混乱：每次onreadystatechange触发都会创建新的定时器，且未清除之前的定时器，导致多个超时逻辑同时执行，干扰最终判断。
• 状态码判断错误：status == 0通常对应跨域失败或本地文件请求场景，不能作为站点在线的有效判断依据。
• 冗余无效代码：onSuccess和onFail函数定义后从未被调用，属于无效代码。

优化实现方案 #

由于XMLHttpRequest受同源策略限制，改用图片加载检测的方式（图片资源加载不受同源策略约束），同时处理缓存问题，代码更简洁可靠：

// 配置目标站点与备选跳转地址
const targetSite = 'https://www.google.com';
const fallbackSite = 'https://www.bing.com';
// 超时阈值（毫秒）
const timeout = 3200;

// 创建图片实例用于检测站点可用性
const checkImg = new Image();
let timeoutTriggered = false;

// 设置超时定时器
const timer = setTimeout(() => {
  timeoutTriggered = true;
  window.location.href = fallbackSite;
}, timeout);

// 图片加载成功：判定目标站点可达
checkImg.onload = () => {
  clearTimeout(timer);
  if (!timeoutTriggered) {
    window.location.href = targetSite;
  }
};

// 图片加载失败：判定目标站点不可达
checkImg.onerror = () => {
  clearTimeout(timer);
  if (!timeoutTriggered) {
    window.location.href = fallbackSite;
  }
};

// 发起检测请求，添加时间戳避免浏览器缓存误判
checkImg.src = `${targetSite}/favicon.ico?${Date.now()}`;

优化方案优势 #

• 规避跨域问题：利用图片资源的跨域加载特性，绕过浏览器同源策略限制。
• 逻辑清晰：仅设置一个超时定时器，加载成功/失败时及时清除定时器，避免逻辑冲突。
• 防缓存干扰：通过添加时间戳参数，确保每次检测请求都是最新的，不会因浏览器缓存误判站点状态。
• 兼容性强：Image对象在所有现代浏览器及旧版浏览器中均支持，无需兼容ActiveX等老旧API。

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