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

6 minutos de lectura
0

Cuando intento invocar mi API de Amazon API Gateway, aparece el error «No "Access-Control-Allow-Origin" header is present on the requested resource». Quiero solucionar este y otros errores de CORS de API Gateway.

Breve descripción

Los errores de uso compartido de recursos entre orígenes (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, debe volver a configurar la API para que cumpla con el estándar CORS.

Para obtener más información sobre la configuración de CORS en el caso de las API de REST, consulte Turning on CORS for a REST API resource. En cuanto a las API HTTP, consulte Configuración de CORS para una API HTTP.

**Nota:**El estándar CORS se debe configurar en el nivel de recurso y se puede controlar mediante configuraciones de API Gateway o integraciones de backend, como AWS Lambda.

Solución

En el siguiente ejemplo de procedimiento se muestra cómo solucionar el error de CORS No «Access-Control-Allow-Origin» header present. Sin embargo, puede utilizar otro procedimiento similar para solucionar todos los errores de CORS. Por ejemplo: Los errores Method not supported under Access-Control-Allow-Methods header y los errores No «Access-Control-Allow-Headers» headers present.

Nota: El error No «Access-Control-Allow-Origin» header present se puede deber a uno de los siguientes motivos:

  • La API no se ha configurado con un método OPTIONS que devuelva los encabezados de CORS necesarios.
  • No se ha configurado otro tipo de método (como GET, PUT o POST) de modo que devuelva los encabezados de CORS necesarios.
  • No se ha configurado una API con integración de proxy o que no sea de proxy para que devuelva los encabezados de CORS necesarios.
  • (Solo en el caso de las API de REST privadas) Se ha llamado una URL de invocación incorrecta o el tráfico no se está enrutando al punto de conexión de la nube virtual privada (VPC) de la interfaz.

Confirmación de la causa del error

Hay dos maneras de confirmar la causa de un error de CORS de API Gateway:

  • Cree un archivo HTTP Archive (HAR) cuando invoque la API. A continuación, compruebe los encabezados de los parámetros devueltos en la respuesta de la API para confirmar la causa del error en el archivo.
    Alternativa:
  • Use 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 API que da error

En el caso de las API de REST

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

En el caso de las API HTTP

Siga las instrucciones que se indican en Configuración de CORS para una API HTTP.

Importante: Si configura CORS para una API HTTP, API Gateway enviará automáticamente una respuesta a las solicitudes OPTIONS preliminares. Esta respuesta se enviará aunque no haya ninguna ruta OPTIONS configurada para la API. En el caso de una solicitud de CORS, API Gateway agrega los encabezados de CORS configurados a la respuesta de una integración.

Cuando configure CORS en el recurso de API, asegúrese de hacer lo siguiente:

  • En Gateway Responses for <api-name> API, seleccione las casillas DEFAULT 4XX y DEFAULT 5XX.

Nota: Si se seleccionan estas opciones predeterminadas, API Gateway responderá con los encabezados de CORS necesarios aunque la solicitud no llegue al punto de conexión. Por ejemplo, si una solicitud incluye una ruta de recursos incorrecta, API Gateway seguirá respondiendo con el error 403: «Falta el token de autenticación».

  • En Métodos, seleccione la casilla del método OPTIONS si aún no está marcada. Además, seleccione las casillas de todos los demás métodos disponibles para solicitudes de CORS. Por ejemplo: GET, PUT y POST.

Nota: La configuración de CORS en la consola de API Gateway agrega un método OPTIONS al recurso si aún no existe. También configura la respuesta 200 del método OPTIONS con los encabezados Access-Control-Allow-* necesarios. Si ya ha configurado CORS mediante la consola, al volver a configurarlo se sobrescribirán los valores existentes.

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

Configure la función de AWS Lambda o el servidor HTTP del backend de modo que envíen los encabezados de CORS necesarios en la respuesta. Tenga en cuenta lo siguiente:

  • Los dominios permitidos deben incluirse en el valor del encabezado Access-Control-Allow-Origin en forma de lista.
  • En el caso de las integraciones de proxy, no puede 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.
  • Si utiliza una integración que no sea de proxy, deberá configurar manualmente una respuesta de integración en API Gateway para devolver los encabezados de CORS necesarios.

Nota: En el caso de las API con una integración que no sea de proxy, la configuración de CORS en un recurso mediante la consola de API Gateway agrega automáticamente los encabezados de CORS necesarios al recurso.

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

En el caso de las API de REST privadas, averigüe si el DNS privado está activado en el punto de conexión de VPC de la interfaz asociado.

Si el DNS privado está activado

Asegúrese de invocar su API privada desde su Amazon Virtual Private Cloud (Amazon VPC) con el nombre del DNS privado.

Si el DNS privado no está activado

Deberá enrutar el tráfico manualmente desde la URL de invocación a las direcciones IP del punto de conexión de VPC.

Nota: Debe usar la siguiente URL de invocación, tanto si el DNS privado está activado como si no:

https://api-id.execute-api.region.amazonaws.com/stage-name

Asegúrese de reemplazar los valores de api-id, region y stage-name por los valores necesarios para la API. Para obtener más información, consulte Cómo invocar una API privada.

Importante: Si se configura el estándar CORS sin el DNS privado activado, tenga en cuenta las siguientes limitaciones:

  • No puede usar nombres de DNS públicos específicos del punto de conexión para acceder a su API privada desde Amazon VPC.
  • No puede usar la opción de encabezado Host porque las solicitudes desde un navegador no permiten manipular el encabezado Host.
  • No puede usar el encabezado personalizado x-apigw-api-id porque inicia una solicitud OPTIONS preliminar que no incluye el encabezado. Las llamadas a la API con el encabezado x-apigw-api-id no llegarán a su API.

Información relacionada

Prueba de CORS

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