Javascript 无法在react组件中使用postMessage

我正试图打开一个弹出窗口，并在那里传递来自react组件的消息，即窗口openshttp://localhost:3001 但信息没有显示出来。以下是打开弹出窗口和弹出窗口后消息的代码：

  React.useEffect(() => {
    document.addEventListener("message", function(event) {
      console.log('event data', event.data, event.source);
    })
  }, []);

  const onAdd = () => {
    const popup = window.open('http://localhost:3001/auth', 'authWindow','height=500,width=500');
    popup.postMessage('data', 'http://localhost:3001');
  }

在那个弹出窗口上indowhttp://localhost:3001/ 打开我想向我的父母传递一条消息windowhttp://localhost:3000/，以下是将消息传递给父级的代码：

  const receiveMessage = (e) => {
    console.log("message event",  e.data);

    e.source.postMessage("message: asasdas", 'http://localhost:3000')
    // if (event.origin !== "http://localhost:3000")
    //   return;
  }

  React.useEffect(() => {
    window.addEventListener("message", receiveMessage);
  }, [])

但这也给出了一个错误： 未能在“DOMSWINDOW”上执行“postMessage”：提供的目标源站http://localhost:3000'与收件人窗口的来源不匹配'http://localhost:3001“。

使用广播频道API。我在我的项目中使用它，发现它更可靠。我看不出你遇到的问题

---

好的，那么我如何在两个不同的域之间进行通信呢？通过通道名称比PostMessages更容易，但不支持Safari或IE。请提供否决投票的理由