Failed to read a named property 'getAttribute' from 'Window': Blocked a frame with origin "https://a1.leagsoft.com" from accessing a cross-origin frame. 这个报错如何解决？-Go服务器开发

这个错误是由于 跨域安全策略 导致的，浏览器禁止了一个页面（https://a1.leagsoft.com）访问另一个不同源的 <iframe> 的 DOM 或 JavaScript API（如 getAttribute）。以下是解决方案：

1. 根本原因

同源策略（Same-Origin Policy）：浏览器默认禁止跨域访问 <iframe> 的内容。

错误场景：


// 父页面（https://a1.leagsoft.com）尝试访问 iframe 的内容
const iframe = document.getElementById("my-iframe");
const innerDoc = iframe.contentDocument; // ❌ 报错！
const attr = innerDoc.documentElement.getAttribute("data-x"); // ❌ Failed to read 'getAttribute'

2. 解决方案

(A) 如果 iframe 受你控制**（可修改它的响应头）

✅ 方法1：设置 CORS + `allow-same-origin`

在 iframe 的服务器添加以下 HTTP Header：

Access-Control-Allow-Origin: https://a1.leagsoft.com

并在 iframe 标签添加 sandbox="allow-same-origin"：

<iframe src="https://your-iframe-domain.com" sandbox="allow-same-origin"></iframe>

✅ 方法2：使用 `postMessage` 通信（推荐）

父页面发送请求：

// 父页面（https://a1.leagsoft.com）
const iframe = document.getElementById("my-iframe");
iframe.contentWindow.postMessage({ action: "getAttribute", name: "data-x" }, "https://iframe-domain.com");

iframe内监听并返回数据：

// iframe内部代码（https://iframe-domain.com）
window.addEventListener("message", (event) => {
    if (event.source !== window.parent) return; //安全检查

    const attributeValue = document.documentElement.getAttribute(event.data.name);
    event.source.postMessage({ attributeValue }, event.origin);
});

父页面接收结果：

window.addEventListener("message", (event) => {
    console.log("Received:", event.data.attributeValue); 
});

(B) Iframe 不受你控制（无法修改响应头）

✅ 方法3：代理绕过跨域限制

通过你的后端服务器代理请求：

// a1.leagsoft.com的后端API示例（Node.js/Python等）
fetch(`/proxy?url=${encodeURIComponent('https://external-site.com/page')}`)
    .then(res => res.text())
    .then(html => {
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, "text/html");
        console.log(doc.documentElement.getAttribute("data-x")); // ✅ OK!
    });

© Debug技巧

检查是否允许跨域访问：

try {
    console.log(iframe.contentWindow.location.href); 
} catch (e) {
    console.error("跨域阻止访问:", e.message);
}

如果报错，说明目标 iframe未正确配置 CORS。

3. Key Notes

方案	适用场景	优点	缺点
`postMessage`	可控的跨域通信	安全、标准方式	需双方协作
CORS Headers	可修改目标服务器	直接访问DOM	需服务器权限
后端代理	完全不可控的网站	绕过浏览器限制	需要额外后端支持