訪問控制允許來源和document.domain的工作不

我有一個PHP頁面中的iframe，我試圖從iframe中獲取父元素，但總是在控制檯收到此錯誤：訪問控制允許來源和document.domain的工作不

未捕獲的拋出：DOMException：訪問一個跨來源幀阻止與原籍 https://subdomain.domain.com的幀。

我已閱讀谷歌的周圍Same Origin policy和Access-Control-Allow-Origin第一頁上的每一個搜索結果，但似乎並沒有被解決我的問題。我仍然收到同樣的錯誤。

這是我迄今所做的：

新增Access-Control-Allow-Origin到我的iframe中的內容。
增加document.domain到我的iframe中的內容。

有其他人有類似的問題？我能做些什麼來解決它？

這裏是我的代碼：

<?php 
header('Access-Control-Allow-Origin: https://b.example.com'); 
?> 

<script> 
    function receiveMessage(event) { 
     if (event.origin !== "https://a.example.com") 
      return; 
    } 
    window.addEventListener("message", receiveMessage, false); 
</script> 


<div> 
    <button title="Close (Esc)" type="button" class="close">×</button> 
</div> 

<iframe name="myIframe" class="myIframe" 
     src="https://b.example.com" width="100%" height="600px" 
     frameborder="0" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen=""> 
</iframe> 

</div>

腳本在b.example.com

<script> 
    window.parent.$('.close').click(function() { 
     var thisObj = this; 
     if (!feedbackLoaded) { 
      $('#openFeedback').click(); 
      feedbackLoaded = true; 
      $('#feedbackForm .close').click(function() { 
       window.parent.$.magnificPopup.proto.close.call(thisObj); 
      }); 
      return false; 
     } else { 
      window.parent.$.magnificPopup.proto.close.call(thisObj); 
     } 
    }); 
</script>

來源

2017-04-04 PHP Developer

處理父窗口始終是一個糟糕的做法。即使域相同 –

我理解你，但是當你在一個十來歲的應用與每天數百萬用戶的工作，你知道最輕微的修改是解決辦法，而不是一個妥善的解決辦法:)這是它是什麼，我們必須找到現有系統的解決方案 –

ok :)然後，您必須向父窗口（Access-Control-Allow-Origin）添加說明。然後，你可以通過postMessage的與它通信：https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage –

無論到https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage你可以實現你的文件和iframe之間的通信。

在這種情況下，您必須指定將在父窗口上可用的所有操作。這裏有一個例子：

父窗口：

<html> 
<head> 
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
</head> 
<body> 
<script> 
    function receiveMessage(event) { 
     console.log(event); 
     if (event.data.message === 'Hello world') { 
      $('#openFeedback').click(); 
     } 
    } 
    window.addEventListener("message", receiveMessage, false); 
</script> 


<div> 
    <button title="Close (Esc)" type="button" class="close">×</button> 
</div> 

<iframe name="myIframe" class="myIframe" 
     src="http://b.test.dev" width="100%" height="600px" 
     frameborder="0" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen=""> 
</iframe> 

</body> 
</html>

和子在IFRAME：

<html> 
<head> 
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
</head> 
<body> 
<script> 
    window.parent.postMessage({message: 'Hello world'}, 'http://test.dev'); 
</script> 
</body> 
</html>

你也應該爲iframe的身份有些安全檢查，就像你在你的例子添加。在這種情況下，你不需要來自IFRAME添加跨域頭

來源

2017-04-05 06:51:57

奇怪的是它爲我工作，沒有添加任何事件監聽父母和添加iframe上的postMessage。我所做的只是在父母的頭部添加了jquery文件，並且工作正常。 –

對不起，我一直在同一個域上運行。讓我試試看Prod –

那麼你成功了嗎？:) –

訪問控制允許來源和document.domain的工作不

回答

相關問題