Recibo dos errores cuando ejecuto el siguiente código en mi aplicación React:
try { iframe.src = applicationRoutes.href; iframe.style.width = '0px'; iframe.style.height = '0px'; iframe.style.border = '0px'; iframe.style.display = 'none'; iframe.id = 'iframe'; iframeRef.current.appendChild(iframe); const myIframe = window.frames['iframe'].contentWindow; myIframe.postMessage('user info', applicationRoutes.href); } catch (error) { console.log(error); }Los errores que recibo son los siguientes:
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://localhost:3000') does not match the recipient window's origin ('http://localhost:4001').y
Refused to display 'http://localhost:3000/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.¿Qué puedo hacer para solucionar estos problemas?
Ambos errores son el resultado de que el iframe y el documento principal se encuentran en diferentes puertos de su servidor local.
Dividamos el mensaje para que sea más fácil de leer.
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://localhost:3000') does not match the recipient window's origin ('http://localhost:4001').Los navegadores limitan hasta qué punto las páginas de un origen pueden acceder a los recursos de otro, esto se denomina CORS (Cross Origin Resource Sharing). Un origen no solo se define por su nombre de dominio, sino también por su número de puerto.
Su recurso deberá ser del mismo origen o debe tener un encabezado HTTP en la respuesta que permita el uso entre dominios. Así que tienes 2 opciones.
iframe se sirva desde el mismo puerto localmenteEsta podría ser una solución sensata si la aplicación que está desarrollando, en producción, siempre se ejecuta en el mismo dominio.
¿Quizás está ejecutando 2 instancias de un servidor cuando realmente podría ejecutar 1 que sirve a ambos tipos?
Si eso no es posible, tendrás que hacer lo siguiente.
Puede agregar un encabezado CORS con * para simplificar, o un host específico, para decirle al navegador que está bien incluir esto en otros dominios.
Por ejemplo, en PHP:
<?php header('Access-Control-Allow-Origin: *');o
<?php header('Access-Control-Allow-Origin: http://localhost:4001');