es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo desplegar mi solución AWS para evitar problemas de CORS?

19 Jul, 2023 Programación

Tengo una aplicación basada en dos componentes principales:

  • Aplicación de React alojada en un bucket de S3 https://app.com/
  • Aplicación de Express alojada en un entorno de Elastic Beanstalk https://api.app.com

Dado que https://app.com/ es diferente a https://api.app.com, obtengo un error de CORS en Firefox y los datos no se entregan.

¿Cómo puedo configurar mis registros de Route 53 para lograr lo que necesito para mi aplicación? (¿S3 y Beanstalk bajo el mismo dominio?)
No tengo problema en cambiar el nombre (api.app.com), solo que no sé cómo hacerlo 🙂

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr el resultado deseado, puedes crear un subdominio, como “api.app.com”, y apuntarlo al entorno de Elastic Beanstalk utilizando Route 53. Aquí están los pasos a seguir:

    1. Ve a tu Consola de Administración de Amazon Web Services y abre Route 53.
    2. Haz clic en el botón “Crear zona hospedada”.
    3. Ingresa el nombre de dominio, digamos “app.com”, para la zona hospedada y haz clic en “Crear”.
    4. Ahora has creado una zona hospedada para “app.com”. Necesitas crear los registros DNS necesarios en esta zona.
    5. Haz clic en la zona hospedada recién creada, luego en “Crear conjunto de registros”.
    6. Para el nombre, ingresa “app.com” y selecciona “Alias” para el “Tipo”.
    7. En “Alias Target”, selecciona el bucket de S3 que aloja la aplicación de React.
    8. Haz clic en “Crear conjunto de registros” para crear el registro DNS para el bucket de S3 que aloja la aplicación de React.
    9. Repite los pasos 5-8 para crear un registro DNS para el entorno de Elastic Beanstalk utilizando el nombre de subdominio “api.app.com”.
    10. Espera a que se propague el DNS (generalmente lleva unos minutos), luego prueba tu dominio accediendo a tu aplicación en “https://app.com” y a la API en “https://api.app.com”, que ahora están bajo el mismo dominio.

    Al configurar Route 53 correctamente, has evitado efectivamente el problema de CORS porque ambas aplicaciones están ahora bajo el mismo nombre de dominio y tu navegador web no bloqueará solicitudes de origen cruzado.

Comments are closed.