@pshevnin

Как правильно использовать window.postMessage()?

Добрый день, у меня стоит изначальная задача отправить сообщение с одного фронтенд приложения на другое, они будут запущены на разных поддоменах, поэтому общий localstorage неподходит. Я хотел бы отправить сообщение при помощи window.postMessage(), как я понимаю, должно работать на разных доменах. вот мой код отправки:
function sendMessage() {
        const targetOrigin = "http://localhost:5174"; 
        const message = "Hello from Origin 1!";
        window.postMessage(message, targetOrigin);

        console.log("Message was sent!");
    }

Вот код приема сообщения:
function receiveMessage(event: any) {
        console.log("receiveMessage ===================");
        if (event.origin === "http://localhost:5173") {
            alert("Received message: " + event.data);
			console.log("Message: " + event.data)
        }
    }   

	onMount(() => {
		window.addEventListener("message", receiveMessage, false);
	});

Оба приложения написаны на sveltekit и в данный момент запущены через npm run dev на localhost на разных портах. После отправки сообщения я получаю такую ошибку:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('localhost:5174') does not match the recipient window's origin ('localhost:5173').

Насколько я понимаю, этот способ должен работать при передаче с разных субдоменов, в таком случае не могу понять, почему возникает ошибка и как её исправить. Если кто-то знает в чём причина и как исправить, или как решить эту задачу иначе, буду прочитать
  • Вопрос задан
  • 127 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы