Question

我正在尝试访问子域中的iframe并获得跨域错误。

以下是示例 .mydomain.com / iframe_test.html的代码：

<html>
<head>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
    <iframe src="http://example2.mydomain.com/welcome.php" width="1000" height="600"></iframe>
    <script>
        $(document).ready(function()
        {
            setTimeout(function(){
                $('#innerdiv',$('iframe').contents()).hide();
            },5000);
        });
    </script>
</body>
</html>

以下是 example2 .mydomain.com / welcome.php的代码：

<?php
header("Access-Control-Allow-Origin: " . "*");
?>
<html>
<head>

</head>
<body>
    <div id="innerdiv">
        hello
    </div>
</body>
</html>

执行 $（'＃innerdiv'，$（'iframe'）。contents（））。hide（）这一行时，会出现以下错误：

Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "http://example.mydomain.com" from accessing a frame with origin "http://example2.mydomain.com". Protocols, domains, and ports must match.

我检查了Fiddler，在welcome.php的响应中确实返回了Access-Control-Allow-Origin标头

是否可以在子域中访问iframe的内容？

Answer 1

Access-Control-Allow-Origin仅用于XHR。

您需要的是Same Origin Policy。

您必须在页面中添加document.domain = 'example.com'。

Answer 2

我在具有divi主题wordpress的custom.unified.js中找到了有关“ Access-Control-Allow-Origin”的解决方案，并且我通过设置此条件进行了纠正

        if (window.parent != window.top) {
    window.top && window.top.__Cypress__ ? r = window.parent === window.top ? window : window.parent : window.top && (r = window.top, window.top, window.self)
    }

Access-Control-Allow-Origin不适用于同一域内的iframe

2 个答案: