¿Cómo puedo solucionar los errores de CORS de mi API de API Gateway?

Descripción corta

Los errores de CORS se producen cuando un servidor no devuelve los encabezados HTTP que el estándar CORS necesita. Para solucionar un error de CORS de una API de REST o una API HTTP en API Gateway, debes volver a configurar la API para que cumpla con el estándar CORS.

Nota: Debes configurar CORS a nivel de recurso. Utiliza configuraciones de API Gateway o integraciones de backend, como AWS Lambda.

Resolución

Puedes utilizar el siguiente procedimiento para solucionar todos los errores de CORS, además del error de CORS No 'Access-Control-Allow-Origin' header present. Otros errores de CORS abarcan Method not supported under Access-Control-Allow-Methods header y No 'Access-Control-Allow-Headers' headers present.

El error No 'Access-Control-Allow-Origin' header present puede deberse a los siguientes motivos:

• No has configurado la API con un método OPTIONS que devuelva los encabezados de CORS necesarios.
• No has configurado otro tipo de método, como GET, PUT o POST, para que devuelva los encabezados de CORS necesarios.
• No has configurado una API con integración de proxy o que no sea de proxy para que devuelva los encabezados de CORS necesarios.
• En el caso de las API de REST privadas, se llama a la URL de invocación incorrecta. O bien, el tráfico no se dirige al punto de enlace de la nube virtual privada (VPC) de la interfaz.

Confirmación de la causa del error

Haz lo siguiente:

• Cuando invoques la API, crea un archivo HTTP Archive (HAR). A continuación, comprueba los encabezados de los parámetros que se devuelven en la respuesta de la API para confirmar la causa del error del archivo.
• Usa las herramientas de desarrollador del navegador para comprobar los parámetros de solicitud y respuesta de la solicitud de API fallida.

Configuración de CORS en el recurso de la API que da error

En el caso de las API de REST

Sigue las instrucciones que se describen en Activar CORS en un recurso mediante la consola de API Gateway.

En el caso de las API HTTP

Sigue las instrucciones de Configurar CORS para las API HTTP en API Gateway.

Al configurar CORS en tu recurso de API, selecciona las siguientes opciones:

Para las respuestas de Gateway, selecciona DEFAULT 4XX y DEFAULT 5XX. Si seleccionas DEFAULT 4XX y DEFAULT 5XX, API Gateway responde con los encabezados de CORS necesarios, incluso cuando una solicitud no llegue al punto de enlace. Por ejemplo, si una solicitud incluye una ruta de recursos incorrecta, API Gateway seguirá respondiendo con el error 403: «Missing Authentication Token».

En el caso de Access-Control-Allow-Methods, si no se ha seleccionado OPTIONS, selecciónalo junto con el resto de métodos que estén disponibles para las solicitudes CORS, como GET, PUT y POST. La consola de API Gateway configura la respuesta 200 del método OPTIONS con los encabezados Access-Control-Allow necesarios y sobrescribe los valores existentes en el recurso reconfigurado.

Configuración de las integraciones de la API de REST de modo que devuelvan los encabezados de CORS necesarios

Para devolver los encabezados de CORS necesarios en tu respuesta, configura la función de Lambda o servidor de proxy HTTP de tu backend. Debes incluir los dominios permitidos en el valor del encabezado Access-Control-Allow-Origin en forma de lista.

En el caso de las integraciones de proxy, no puedes configurar una respuesta de integración en API Gateway para modificar los parámetros de respuesta que devuelve el backend de la API. En una integración de proxy, API Gateway reenvía la respuesta del backend directamente al cliente.

Para integraciones que no sean de proxy, deberás configurar manualmente una respuesta de integración en API Gateway para devolver los encabezados de CORS necesarios. Utiliza la consola de API Gateway para configurar CORS. La consola agrega automáticamente los encabezados de CORS necesarios al recurso configurado.

(Solo en el caso de las API de REST privadas) Comprobación de la configuración del DNS privado del punto de enlace de la interfaz

En el caso de las API de REST privadas, averigua si el DNS privado está activado en el punto de enlace de VPC de la interfaz asociado.

Si el DNS privado está activado

Utiliza el nombre de DNS privado para llamar a tu API privada desde Amazon Virtual Private Cloud (Amazon VPC).

Si el DNS privado no está activado

Deberás enrutar el tráfico manualmente desde la URL de invocación a las direcciones IP del punto de enlace de VPC. Utiliza la siguiente URL de invocación (alias de Amazon Route 53):

https://{rest-api-id}-{vpce-id}.execute-api.{region}.amazonaws.com/{stage}

Nota: Sustituye rest-api-id, region, vpce-id y stage por los valores de tu API.

Si el DNS privado no está activado, no puedes usar nombres de DNS públicos específicos del punto de enlace para acceder a tu API privada desde la VPC. Además, no puedes usar la opción de encabezado Host porque las solicitudes desde un navegador no permiten modificar el encabezado Host.

En las API privadas, no puedes usar el encabezado personalizado x-apigw-api-id porque inicias una solicitud OPTIONS preliminar que no incluye el encabezado. Las llamadas a la API con el encabezado x-apigw-api-id no llegan a tu API.

Nota: Asegúrate de que la autorización esté desactivada en el método OPTIONS de tu API.

Información relacionada

Probar CORS para una API de API Gateway

Activar CORS en un recurso mediante la característica Importar API de API Gateway