Angular 7: Transfer data from one application to another application

Viewed 1204

I have 2 Angular applications. I want to pass data from one application to another application which are running on different domain. I tried with window.postMessage but, I am not getting any data in 2nd Application.

1st Application has below code

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

2nd Application has below code

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

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

  }
2 Answers

Due to security reasons, two different domains can not communicate with each other.

That goes for postMessage, localStorage, or anything related to your browser.

The only suitable option is to make them communicate to a third party, let it be a standalone client, an API, or anything else that isn't related to the browser itself.

You maybe could use an Iframe, but I'm not sure about it, and I wouldn't even know how to do it.

If you have 2 application that are running on different domain, it means that the best method to communicate with each other is setting up an api that allow such communication. So you need a backend that handle the api.

Related