新手提问：能否用JavaScript实现跨域请求验证站点访问权限？

嘿，作为JS新手碰到这种跨域场景确实容易困惑，我来帮你拆解下这个需求的可行性和实现思路～

首先直接给结论：这个需求是可以实现的，但有一定局限性，核心原因是浏览器的同源策略会限制你直接发起跨域HTTP请求去检测站点B的可达性，但我们可以利用不受同源策略限制的资源类型来做间接检测。

可行的实现方案：利用图片资源检测 #

图片（<img>）、脚本（<script>）这类资源不受浏览器同源策略的限制，所以我们可以通过尝试加载站点B的某个公开资源（比如它的favicon.ico）来判断用户是否能访问该站点。

下面是一段可直接用的示例代码，放在站点A的页面里：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>站点A访问验证</title>
    <script>
        // 页面加载完成后执行检测
        window.addEventListener('DOMContentLoaded', function() {
            // 创建一个图片实例
            const detectorImg = new Image();
            // 替换成站点B的某个公开可访问的图片地址，比如favicon
            detectorImg.src = 'https://site-b.com/favicon.ico';

            // 图片加载成功 = 用户能访问站点B
            detectorImg.onload = function() {
                // 显示站点A的正常内容
                document.body.innerHTML = `
                    <h1>欢迎来到站点A</h1>
                    <p>验证通过：你可以访问站点B</p>
                `;
            };

            // 图片加载失败 = 用户无法访问站点B
            detectorImg.onerror = function() {
                // 清空页面，显示空白
                document.body.innerHTML = '';
            };
        });
    </script>
</head>
<body>
    <!-- 初始状态可以放个简单的提示 -->
    <p>正在验证访问权限...</p>
</body>
</html>

需要注意的局限性 #

• 资源可达性≠站点页面可达：这个方法只能检测用户是否能加载指定的资源，如果站点B的页面需要登录，但图片是公开的，就会出现误判；反之，如果图片被防盗链限制，即使用户能访问B的页面，也会检测失败。
• 依赖站点B的公开资源：你需要确保站点B有一个稳定的、允许跨域加载的公开资源（比如大部分站点的favicon都是符合要求的）。
• 存在检测延迟：用户需要等待图片加载完成才能看到结果，体验上会有短暂的等待时间。

为什么不能直接用AJAX/fetch检测？ #

浏览器的同源策略会阻止你从站点A直接发起对站点B的AJAX或fetch请求，除非站点B配置了CORS（跨域资源共享）头允许站点A访问——但你提到无法控制站点B，所以这种方法完全行不通。

总的来说，用图片加载的方式是目前最适合你场景的解决方案，虽然有局限性，但能满足基础的需求。

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