如何在JavaScript中检测URL可达性并切换备用地址？

你之前的方案无法运行的核心原因是：使用了Node.js专属的https模块和require语法，而前端浏览器环境不支持这些API，必须改用浏览器原生的网络请求API（如fetch或XMLHttpRequest）。

核心实现思路 #

1. 用浏览器支持的fetch API发起请求（优先用HEAD请求，减少数据传输）
2. 设置请求超时，避免长时间等待
3. 先检测主URL，失败则切换到备用URL
4. 可选择在页面加载时预检测并缓存结果，提升点击响应速度

具体代码实现 #

1. 封装URL检测函数 #

// 检测主URL是否可用，失败则返回备用URL
async function getAvailableUrl(mainUrl, backupUrl) {
  // 检测主URL
  try {
    const response = await fetch(mainUrl, {
      method: 'HEAD', // 只请求响应头，节省带宽
      signal: AbortSignal.timeout(5000), // 5秒超时
      mode: 'cors' // 跨域时需要后端配置CORS，否则改为'no-cors'（但无法判断状态码）
    });
    if (response.ok) { // 响应状态码在200-299之间
      console.log('主服务在线');
      return mainUrl;
    }
    throw new Error('主服务响应异常');
  } catch (err) {
    console.log('主服务不可达，切换到备用服务');
    // 检测备用URL
    try {
      const backupRes = await fetch(backupUrl, {
        method: 'HEAD',
        signal: AbortSignal.timeout(5000)
      });
      if (backupRes.ok) {
        return backupUrl;
      }
      throw new Error('备用服务响应异常');
    } catch (backupErr) {
      console.error('所有服务均不可用');
      return null;
    }
  }
}

2. 按钮点击时使用可用URL #

// 定义主/备用URL
const serviceURL1 = "http://serviceURL1.uk/";
const serviceURL1Backup = "http://serviceURLbackup.uk/";

// 绑定按钮点击事件
document.getElementById('targetButton').addEventListener('click', async () => {
  const availableUrl = await getAvailableUrl(serviceURL1, serviceURL1Backup);
  if (!availableUrl) {
    alert('所有服务暂时不可用，请稍后重试');
    return;
  }
  
  // 使用可用URL发起业务请求
  fetch(availableUrl)
    .then(res => res.json())
    .then(data => {
      // 处理返回的数据
      console.log('请求成功:', data);
    })
    .catch(reqErr => {
      console.error('业务请求失败:', reqErr);
    });
});

3. 可选：页面加载时预检测缓存 #

如果希望按钮点击时无需等待检测，可以在页面加载阶段提前检测并缓存结果：

const urlCache = {};

// 页面加载完成后预检测
window.addEventListener('load', async () => {
  urlCache.service1 = await getAvailableUrl(serviceURL1, serviceURL1Backup);
  // 可同时预检测其他URL
});

// 按钮点击直接用缓存
document.getElementById('targetButton').addEventListener('click', () => {
  const availableUrl = urlCache.service1;
  if (!availableUrl) {
    alert('服务不可用');
    return;
  }
  // 发起业务请求...
});

关键注意事项 #

• 跨域问题：如果目标URL与前端页面域名不同，必须确保后端配置了CORS（允许HEAD/GET请求）。若无法配置CORS，改用mode: 'no-cors'时，无法获取响应状态码，只能判断请求是否能完成（兼容性有限）。
• 超时设置：必须添加超时逻辑，避免请求长时间挂起影响用户体验。
• 错误处理：要覆盖网络错误、响应异常、备用URL也失败等多种场景，给用户明确提示。

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