ZBLOG

为什么添加了Access-Control-Allow-Origin: *还是会报这个错误

即使你在服务器端设置了 Access-Control-Allow-Origin: *,仍然可能遇到跨域问题,原因可能是以下几种情况:


1. 目标窗口(iframe/子窗口)未正确设置 CORS

错误信息提到:

Failed to read a named property 'getAttributeHook' from 'Window': Blocked a frame with origin "https://a1.leagsoft.com" from accessing a cross-origin frame.

这表明你尝试访问的是 另一个窗口(iframe 或弹出窗口)的 DOM 或 JavaScript 属性,而不仅仅是发送 HTTP 请求。

关键区别:

  • CORS (HTTP 跨域):适用于 fetch, XMLHttpRequest, axios 等 HTTP 请求。
  • 跨窗口/iframe JS API 访问:浏览器默认禁止直接访问不同源的 window.documentwindow.localStorage、自定义属性(如 getAttributeHook)。

解决方案:

(A) 如果目标 iframe/窗口可控

在目标页面添加允许被父窗口访问的权限:

<script>
    // 允许父窗口访问某些属性
    window.getAttributeHook = "some value"; // (可选)
</script>

或者使用 postMessage

// 父窗口代码
const iframe = document.getElementById("your-iframe");
iframe.contentWindow.postMessage({ type: "request", property: "getAttributeHook" }, "*");

// iframe内部代码
window.addEventListener("message", (event) => {
    if (event.data.type === "request") {
        event.source.postMessage({
            property: event.data.property,
            value: window[event.data.property]
        }, "*");
    }
});

(B) 如果目标 iframe/窗口不可控

无法绕过浏览器的安全限制,除非:

  1. 改用代理服务器(后端请求目标页面并返回数据)。
  2. 使用浏览器插件(如 Chrome Extension,需声明权限)。

2. CORS Headers 未正确生效

即使设置了 Access-Control-Allow-Origin: *,仍可能因为以下原因失效:

(A) OPTIONS Preflight 请求失败

对于复杂请求(如带自定义头的 POST/PUT/DELETE),浏览器会先发送 OPTIONS 预检请求。
确保服务器正确处理:

Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization

如果请求包含凭据(如 cookies),则不能使用 *,必须指定域名:

Access-Control-Allow-Origin: https://yourdomain.com
Access-Control-Allow-Credentials: true

3. HTTPS vs HTTP Mixed Content

如果主站是 HTTPS,但 iframe/src是 HTTP,浏览器会阻止加载。
解决方式:统一使用 HTTPS。


4. Cache / Browser DevTools Bug

有时浏览器缓存旧的 CORS Headers。尝试:

  1. 强制刷新页面 (Ctrl + Shift + R)。
  2. 清空缓存
  3. 检查 Network Tab,确认响应头是否真的包含 CORS。

5. Chrome Extensions / Electron App的特殊情况

如果是扩展程序或桌面应用,需要在 manifest/permissions中声明跨域权限。


总结排查步骤:

  1. ✅ 检查是否真的是 JS API 跨域访问(而非 HTTP CORS)。
  2. ✅ 如果是 iframe/window API,改用 postMessage
  3. ✅ 确保服务器正确响应 CORS Headers(包括预检)。
  4. ✅ 避免混合 HTTPS/HTTP。
  5. ✅ 清除缓存后测试。

如果仍有问题,可以提供更详细的代码和网络请求截图!


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=24072

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?