使 localhost/... 弹出 localhost:3000/

Question

我有一个本地文件a.html如下，可以用https://localhost/a.html启动。通过点击Open b，它可以打开另一个文件b.html，然后通过Send按钮，它可以通过postMessage:

发送数据

<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/ 似乎被认为是 cross-origin.

有没有人有任何解决方案或解决方法来使 https://localhost/a.html 打开 https://localhost:3000/#/new？

编辑 1： 我使用 Mac。实际上，在投入生产时，所有内容都将放在同一个域 www.myexample.com 下，该域具有 a.html 之类的静态文件并运行服务器。我只想在 Mac.

中为 localhost 中的开发提供一个简单的解决方案

编辑 2： 一个限制是，我必须通过 https://localhost/a.html 打开 a.html；我不允许使用 http 或将其用作静态文件（即 https://localhost:3000/a.html）。

Answer 1

您提到您使用的是 MEAN 堆栈，所以我假设您使用的是 ExpressJS。

可以提供静态服务（用于开发）：参见 http://expressjs.com/en/starter/static-files.html

不要在本地主机上使用 https...它不会使任何事情更安全，只需添加一个不需要的自签名证书即可。

对于更通用的解决方案，nginx 可用于提供静态文件并将其他路径传递到后端。

Answer 2

一个解决方案在带有一些特殊参数的终端中打开 Chrome：

open -a Google\ Chrome --args --disable-web-security --user-data-dir=/Users/SoftTimur/Desktop/user-data-dir

我也尝试了一些 Chrome 加载项，但在我的测试中不起作用。

如果我们有一个解决方案（例如，某些设置）而不必每次都从终端打开 Chrome，那就太好了...

使 localhost/... 弹出 localhost:3000/

Make localhost/... popup localhost:3000/

javascript

postmessage

localhost

popup