如何检测终端用户是否可访问指定URL？Ajax检测方案问题求助

嘿，我懂你要做的事儿——就是在用户点跳转按钮前，先帮他们测测目标网站能不能访问，要是不行就转去备用地址对吧？你用$.ajax的思路没问题，但确实会碰到几个坑，我给你捋捋怎么改进：

先说说你现有代码的常见问题 #

• 跨域拦截：浏览器的同源策略会拦住不同域名/协议/端口的请求，除非目标网站配置了CORS允许你的域名访问。直接发GET请求大概率会被拒，哪怕用户自己能打开那个网站。
• 没有错误处理：你只写了success回调，但请求超时、服务器报错、网络断了这些情况都没处理，没法触发备用引导逻辑。
• 请求冗余：GET会拉取整个页面内容，其实咱们只需要确认连接通不通，用更轻量的请求就行。

改进版前端检测代码 #

试试用HEAD请求（只返回响应头，不拿页面内容），再加超时和错误回调：

function checkIfUrlWorks(targetUrl, onAccessible, onUnreachable) {
  $.ajax({
    type: "HEAD",
    url: targetUrl,
    timeout: 5000, // 5秒没响应就算超时
    success: () => {
      console.log('能访问目标网站');
      onAccessible();
    },
    error: (xhr, status) => {
      console.log(`访问失败：${status}`);
      onUnreachable();
    }
  });
}

// 调用示例
checkIfUrlWorks(
  'https://example.com',
  () => window.location.href = 'https://example.com', // 能访问就跳转
  () => window.location.href = 'https://你的备用地址.com' // 不行就去备用页
);

要是碰到跨域问题怎么办？ #

如果目标网站没开CORS，前端请求肯定会被浏览器拦。这时候得靠服务器代理——让你的后端去请求目标网站，再把结果告诉前端：

比如用Node.js+Express写个简单的后端接口：

// 后端代码示例
app.get('/check-target-url', async (req, res) => {
  const targetUrl = req.query.url;
  try {
    // 后端发起HEAD请求，不受浏览器同源限制
    await fetch(targetUrl, { method: 'HEAD' });
    res.json({ isAccessible: true });
  } catch (err) {
    res.json({ isAccessible: false });
  }
});

然后前端调用自己的后端接口：

$.ajax({
  type: "GET",
  url: `/check-target-url?url=https://example.com`,
  timeout: 5000,
  success: (data) => {
    if (data.isAccessible) {
      window.location.href = 'https://example.com';
    } else {
      window.location.href = 'https://你的备用地址.com';
    }
  },
  error: () => {
    // 连代理接口都出问题了，直接引导备用地址
    window.location.href = 'https://你的备用地址.com';
  }
});

最后提个小提醒 #

就算检测显示能访问，也不能保证用户打开页面完全正常（比如可能页面里的某些资源加载失败），但这已经是前端能做到的最靠谱的预检测方式啦。

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