如何在JavaScript中检测网站URL是否正常运行？

原方案的核心问题 #

你当前的代码存在几个关键问题：

1. 同步XMLHttpRequest：现代浏览器已不推荐使用同步请求，会阻塞主线程，且部分场景下被限制
2. 跨域限制：浏览器同源策略会阻止跨域HEAD请求，若目标网站未配置CORS，直接抛出net::ERR_FAILED错误
3. 状态码逻辑错误：301/302是正常重定向状态，并非无效；虚假域名是域名解析失败（net::ERR_NAME_NOT_RESOLVED），属于网络层错误，不会返回HTTP状态码，自然无法通过status!=404判断

可行解决方案 #

方案一：前端基础检测（受同源策略限制） #

先验证URL格式合法性，再通过异步Fetch处理网络错误，同时规避跨域报错：

async function isUrlValidAndReachable(url) {
    // 第一步：验证URL格式是否合法
    try {
        new URL(url); // 利用原生URL构造函数做格式校验
    } catch (e) {
        return false; // 格式不合法直接判定无效
    }

    // 第二步：尝试发起请求检测可达性
    try {
        await fetch(url, {
            method: 'HEAD',
            mode: 'no-cors', // 跳过跨域校验，避免直接报错
            signal: AbortSignal.timeout(5000) // 设置5秒超时，防止长时间等待
        });
        // 能走到这一步，说明网络连接成功（无论跨域与否）
        return true;
    } catch (err) {
        // 捕获域名解析失败、超时、网络断开等错误
        if (err.name === 'TimeoutError' || err.message.includes('Failed to fetch') || err.message.includes('name not resolved')) {
            return false;
        }
        return false;
    }
}

注意：该方案无法获取跨域网站的HTTP状态码，只能判断网络连接是否成功，比如301重定向的网站会被判定为有效，符合你的需求；但部分配置严格的网站可能即使存在也会返回false。

方案二：后端代理检测（推荐，无跨域限制） #

由于前端同源策略的限制，最可靠的方式是通过后端代理请求目标URL，再把结果返回给前端。以下是Node.js（Express）的示例：

后端代码

// Express 后端接口示例
const express = require('express');
const app = express();

app.get('/check-url', async (req, res) => {
    const targetUrl = req.query.url;
    if (!targetUrl) {
        return res.json({ valid: false });
    }

    try {
        // 先验证URL格式
        new URL(targetUrl);
        // 发起HEAD请求检测状态
        const response = await fetch(targetUrl, {
            method: 'HEAD',
            signal: AbortSignal.timeout(5000)
        });
        // 状态码200-399都判定为有效（包含重定向）
        res.json({ valid: response.ok || (response.status >= 300 && response.status < 400) });
    } catch (err) {
        // 域名解析失败、超时、网络错误等都判定为无效
        res.json({ valid: false });
    }
});

app.listen(3000);

前端调用代码

async function checkUrlViaBackend(url) {
    try {
        const response = await fetch(`/check-url?url=${encodeURIComponent(url)}`);
        const result = await response.json();
        return result.valid;
    } catch (err) {
        return false;
    }
}

关键注意事项 #

• 必须设置超时时间，避免请求长时间挂起占用资源
• 优先验证URL格式，减少无效的网络请求
• 后端代理方案能准确获取目标网站的HTTP状态，是跨场景检测的最优解

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