ローカルファイルa.htmlがあります。これはhttps://localhost/a.htmlで起動できます。 Open bをクリックすることで、それはその後、Sendボタンで、それがpostMessageでデータを送ることができ、別のファイルb.htmlを開くことができます。localhost/...を作成するpopup localhost：3000/
<html>
<body>
<p onclick="openWindow()">Open b</p>
<form>
<input type="button" value="Send">
</form>
<script>
function openWindow() {
var popup = window.open("https://localhost/b.html", "popup", "width=200, height=200");
// var popup = window.open("https://localhost:3000/#/new", "popup", "width=1000, height=1000");
var button = document.querySelector("form input[type=button]");
button.onclick = function(e) {
e.preventDefault();
e.stopPropagation();
popup.postMessage("hi, how are you?", popup.location.href);
}
}
</script>
</body>
</html>
を今、かなりhttps://localhost/b.htmlを開くよりも、私は、ローカルアプリケーションが提供するページhttps://localhost:3000/#/newを開きたいです。だから私はvar popup = window.open("https://localhost:3000/#/new", "popup", "width=1000, height=1000");行のコメントを外します。それを開いている間、それはエラーが発生します：
Uncaught DOMException: Blocked a frame with origin "https://localhost" from accessing a cross-origin frame.
at HTMLInputElement.button.onclick (https://localhost/a.html:20:49)
だから、https://localhost/とhttps://localhost:3000/がクロス起源として考えているようです。
https://localhost/a.htmlを開こうとする人には、解決策や回避策がありますかhttps://localhost:3000/#/new？
編集1：私はMacを使用しています。実際にプロダクションに行くときは、すべてが同じドメインwww.myexample.comの下に置かれます。これはa.htmlのような静的ファイルを持ち、サーバーを実行します。私はちょうどMacでlocalhostの開発のための簡単なソリューションを持っていたいです。
編集2：制限があるので、私はa.htmlをhttps://localhost/a.htmlで開く必要があります。私はhttpを使用したり、静的ファイル（すなわちhttps://localhost:3000/a.html）として提供することはできません。
は、彼らは単にクロス起源であり、あなたはnginxのようなリバースプロキシが必要になります同じサーバーにする –
私はmacを使用しています。私は 'localhost'での開発のための簡単な解決策を持っています。私のPSを参照してください... – SoftTimur
ファイルを提供するために何を使用していますか？ほとんどのブラウザはlocalhostを特別に扱い、自己署名証明書を追加することは意味をなさないため、localhostのhttpsは愚かではありません。 –