使 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/被认为是跨域的。

有没有人有任何解决方案或解决方法让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/

问题描述

2 个解决方案

解决方案1
0 2017-03-08 03:57:43

解决方案2
0 已采纳 2017-03-09 01:36:15

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

问题描述

2 个解决方案

解决方案1 0 2017-03-08 03:57:43

解决方案2 0 已采纳 2017-03-09 01:36:15

解决方案1
0 2017-03-08 03:57:43

解决方案2
0 已采纳 2017-03-09 01:36:15