Saya cuba mendapatkan dua aplikasi React untuk berkomunikasi dengan menghantar mesej yang mengandungi objek bertali.

Ibu bapa (http://localhost:3000) menghantar mesej melalui postMessage seperti ini:

    let iframe = document.querySelector("iframe")

    useEffect(() => {
        if (!!localStorageObject && !!iframe) {
            iframe?.contentWindow?.postMessage(localStorageObject, "http://localhost:3001")
        }
    }, [localStorageObject, iframe])

    // ...file and start of return

   <iframe
       style={{minHeight: window.outerHeight, width: '100%', border: "none"}}
       referrerPolicy="strict-origin-when-cross-origin"
       src={myUrlWithParams}
       title="App"
       allow="clipboard-write"
       id={"iframe"}
   />

iFrame (http://localhost:3001) tidak menerima mesej, sekurang-kurangnya tidak serta-merta (saya perlu menunggu refresh lembut bertindak balas untuk menunjukkan log).

Ralat pertama yang dilemparkan ialah:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://localhost:3001') does not match the recipient window's origin ('http://localhost:3000').