Angular 7：将数据从一个应用程序传输到另一个应用程序

Question

我有两个Angular应用程序。我想要在不同的域上运行的另一个应用程序中传递数据到另一个应用程序。我尝试使用window.postMessage，但是在第二个应用程序中没有获取到任何数据。

第一个应用程序具有以下代码：

const w = window.open('http://192.168.5.134:1210/', ''); 
w.postMessage('Hello Message!', 'http://localhost:4200');

第二个应用程序有以下代码

  window.addEventListener("message", receiveMessage, false);

  function receiveMessage(event) {
    alert(event.origin);
    if (event.origin !== "http://localhost:4200") {
      return;
    }
    alert(event.data.data);

  }

- Rishabh Shah

---

这篇文章或许能为你提供帮助：https://medium.com/disney-streaming/combining-multiple-angular-applications-into-a-single-one-e87d530d6527。 - Edison Augusthy

@Edison - 感谢您提供的链接。我们无法做到这一点。 - Rishabh Shah

@RishabhShah socket 是怎么样的？你可以实现它。 - Yash Rami

@YashRami - 我不确定关于套接字。如果你有任何参考资料，能否给我一些想法。 - Rishabh Shah

他谈论的是像socket.io这样的方法，但这并不改变你将运行一个单独的服务而不是集成在angular中的服务的事实。 - Robert

@Robert - 没错！ - Rishabh Shah

Answer 1

由于安全原因，两个不同的域之间无法相互通信。这适用于postMessage、localStorage或与您的浏览器相关的任何内容。

唯一合适的选项是使它们与第三方进行通信，可以是独立客户端、API或任何与浏览器本身无关的其他内容。

您可能可以使用iframe，但我不确定，也不知道如何操作。

- user4676340

Answer 2

如果你有两个运行在不同域名下的应用程序，那么最好的沟通方式就是建立允许这种通信的API接口。因此，你需要一个后端来处理这个API。

- Robert

---

我们本来可以这样做，但是我们正在进行服务调用，无论我们得到什么响应，我们都需要将其传递给在不同域上运行的另一个应用程序的新标签页，并且我们无法从后端进行任何操作。 - Rishabh Shah

没有其他具体的模式，正如@Maryannah所说，由于同源策略，与浏览器相关的通信不适合进行，即使使用Iframe也是疯狂的做法。 - Robert