如何使用JavaScript检测跨域名URL是否存在？CORS报错如何解决？

问题背景 #

我正尝试在自有站点（https://radiusofficefurniture.ie）中使用JavaScript检测其他域名的URL是否存在，所用代码如下：

var request = new XMLHttpRequest();  
request.open('GET', 'https://www.mozilla.org', true);
request.onreadystatechange = function(){
    if (request.readyState === 4){
        if (request.status === 404) {  
            alert("Oh no, it does not exist!");
        }  
    }
};
request.send();

但运行时触发了CORS策略报错，错误信息如下：

来自源站 https://radiusofficefurniture.ie 的对 https://www.mozilla.org/ 的 XMLHttpRequest 请求已被CORS策略阻止：被请求的资源上不存在 'Access-Control-Allow-Origin' 响应头。

需求是实现使用JavaScript检测跨域名URL是否存在，业务场景为：若外部域名的URL存在，就需要在我的站点中添加对应的HTML标签。

解决方案 #

方案1：服务端代理（稳定性最高，全场景适用） #

CORS是浏览器层面的同源安全限制，服务端发起网络请求不受该规则约束，这是最通用的解决方式：

• 前端将待检测的目标URL提交到自有站点的后端接口
• 后端使用HEAD请求（仅获取响应头、不下载响应体，比GET请求性能更高）访问目标URL，根据返回的状态码判断资源是否存在：2xx/3xx范围判定为存在，4xx/5xx范围判定为不存在
• 后端将检测结果返回给前端，前端再根据结果执行添加HTML标签的逻辑

方案2：前端无代理方案（仅适用于可嵌入的静态资源场景） #

如果待检测的是图片、JS、CSS这类可以直接嵌入页面的静态资源，可以通过创建对应DOM标签监听加载事件的方式实现，不会触发CORS报错：

// type可选值：image/js/css
function checkStaticResource(url, type = 'image') {
  return new Promise((resolve) => {
    let el;
    switch(type) {
      case 'image':
        el = new Image();
        el.src = url;
        break;
      case 'js':
        el = document.createElement('script');
        el.src = url;
        document.head.appendChild(el);
        break;
      case 'css':
        el = document.createElement('link');
        el.rel = 'stylesheet';
        el.href = url;
        document.head.appendChild(el);
        break;
      default:
        resolve(false);
        return;
    }
    el.onload = () => {
      resolve(true);
      // 检测完成后移除临时添加的标签，避免影响页面
      if (type === 'js' || type === 'css') el.remove();
    }
    el.onerror = () => {
      resolve(false);
      if (type === 'js' || type === 'css') el.remove();
    }
  })
}

// 调用示例
checkStaticResource('https://example.com/test.png', 'image').then(isExists => {
  if (isExists) {
    // 执行添加对应HTML标签的逻辑
  }
})

注意：该方案仅适用于静态资源检测，如果要检测普通HTML页面等非可嵌入资源，无法通过该方案实现，必须使用服务端代理。

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