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

Última actualización: 27-01-2021

Obtengo el error “No 'Access-Control-Allow-Origin' header is present on the requested resource” (No hay ningún encabezado 'Access-Control-Allow-Origin' presente en el recurso solicitado) cuando intento invocar mi API de Amazon API Gateway. ¿Cómo lo soluciono?

Descripción corta

Los errores de uso compartido de recursos entre orígenes (CORS) ocurren cuando un servidor no devuelve los encabezados HTTP que exige el estándar CORS. Para resolver un error CORS desde una API REST de API Gateway o API HTTP, configure de nuevo la API para que cumpla con el estándar CORS.

Para obtener más información sobre la activación de CORS para API REST, consulte Habilitar CORS para un recurso de API REST. Para API HTTP, consulte Configurar CORS para una API HTTP.

Nota: CORS debe habilitarse en el nivel de recursos y se puede administrar a través de configuraciones de API Gateway o integraciones backend, como AWS Lambda.

Resolución

El siguiente ejemplo muestra cómo solucionar el error de CORS No ‘Access-Control-Allow-Origin’ header present (No hay ningún encabezado ‘Access-Control-Allow-Origin’ presente). Sin embargo, puede utilizar un procedimiento similar para solucionar todos los errores CORS. Por ejemplo, los errores Method not supported under Access-Control-Allow-Methods header (Método no compatible en el encabezado Access-Control-Allow-Methods) y No ‘Access-Control-Allow-Headers’ headers present (No hay ningún encabezado ‘Access-Control-Allow-Headers’ presente).

Nota: El error No 'Access-Control-Allow-Origin' header present (No hay ningún encabezado 'Access-Control-Allow-Origin' presente) puede ocurrir por cualquiera de las siguientes razones:

  • La API no está configurada con un método OPTIONS que devuelva los encabezados CORS necesarios.
  • Cualquier otro tipo de método (como GET, PUT o POST) no está configurado para devolver los encabezados CORS necesarios.
  • Una API con integración de proxy o integración que no es de proxy no está configurada para devolver los encabezados CORS necesarios.
  • En el caso de una API REST privada, se llama a la URL de invocación incorrecta, o el tráfico no se dirige al punto de enlace de la Virtual Private Cloud (VPC) de la interfaz.

Confirmar la causa del error

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

  • Cree un archivo HTTP Archive (HAR) cuando invoque su API. A continuación, confirme la causa del error en el archivo mediante la comprobación de los encabezados en los parámetros que ha devuelto la respuesta de la API.
  • Utilice las herramientas para desarrolladores en su navegador para comprobar los parámetros de solicitud y respuesta de la solicitud de API fallida.

Habilitar CORS en el recurso de API afectado por el error

En el caso de API REST, consulte Habilitar CORS en un recurso mediante la consola de API Gateway. Para API HTTP, consulte Configurar CORS para una API HTTP.

Importante: Si configura CORS para una API HTTP, API Gateway enviará de manera automática una respuesta para solicitudes OPTIONS preliminares, incluso si no hay una ruta de OPTIONS configurada para su API. En el caso de una solicitud CORS, API Gateway agrega los encabezados CORS configurados a la respuesta desde una integración.

Cuando habilite CORS, asegúrese de hacer lo siguiente:

  • Para respuestas de la gateway para la API <api-name>, marque las casillas de verificación DEFAULT 4XX and DEFAULT 5XX.

Nota: Cuando seleccione estas opciones predeterminadas, API Gateway responde con los encabezados CORS necesarios, incluso cuando una solicitud no llega al punto de enlace. Por ejemplo, si una solicitud incluye una ruta de recurso incorrecta, API Gateway sigue respondiendo con un error “Missing Authentication Token” (Falta el token de autenticación) 403.

  • Para Methods (Métodos), marque la casilla de verificación del método OPTIONS si aún no lo está. Además, seleccione las casillas de verificación para el resto de métodos disponibles para solicitudes CORS. Por ejemplo: GET, PUT y POST.

Nota: Habilitar CORS en la consola de API Gateway agrega un método OPTIONS al recurso si aún no existe uno. También configura la respuesta 200 del método OPTIONS con los encabezados Access-Control-Allow-* necesarios. Si ya ha habilitado CORS con la consola, al habilitarlo de nuevo se sobrescribirán los valores existentes.

Configurar sus integraciones de la API REST para devolver los encabezados CORS necesarios

Configure su función de AWS Lambda de backend o servidor HTTP para enviar los encabezados CORS necesarios en su respuesta. Para devolver una lista de dominios en Access-Control-Allow-Origin, debe configurar su backend para enviar los nombres de dominio en una lista como el valor para el encabezado Access-Control-Allow-Origin.

Importante: Si utiliza una integración de proxy, no puede configurar una respuesta de integración en API Gateway para modificar los parámetros de respuesta que devuelve su backend de la API. En una integración de proxy, API Gateway envía la respuesta de backend directamente al cliente.

Si utiliza una integración que no es de proxy, configure de manera manual una respuesta de integración en API Gateway para devolver los encabezados CORS necesarios.

Nota: Para API con una integración que no es de proxy, habilitar CORS en un recurso mediante la consola de API Gateway agrega de manera automática los encabezados CORS necesarios al recurso.

Verificar la configuración de DNS privada del punto de enlace de su interfaz (solo para API REST privadas)

En el caso de API REST privadas, determina si el DNS privado está habilitado para el punto de enlace de la VPC de interfaz.

Si el DNS privado está habilitado para el punto de enlace de la interfaz, llame a su API privada desde su Amazon Virtual Private Cloud (Amazon VPC) con el nombre de DNS privado para evitar errores de CORS.

Si el DNS privado no está habilitado, dirija el tráfico de forma manual desde la URL de invocación a las direcciones IP del punto de enlace de la VPC.

Nota: Utilice la siguiente URL de invocación esté el DNS privado habilitado o no: https://api-id.execute-api.region.amazonaws.com/stage-name. Asegúrese de que sustituye los valores de api-id (ID de API), region (región), and stage-name (nombre de etapa) por los valores requeridos para su API. 

Para obtener más información, consulte Cómo invocar una API privada.

Importante: Si CORS está habilitado cuando el DNS privada no lo está, tenga en cuenta las siguientes limitaciones:

  • No puede utilizar nombres de DNS públicos específicos de puntos de enlace para acceder a su API privada desde su Amazon VPC.
  • No puede utilizar la opción de encabezado Host (Anfitrión), puesto que las solicitudes desde un navegador no permiten la manipulación de encabezados de anfitrión.
  • No puede utilizar el encabezado personalizado x-apigw-api-id, puesto que desencadena una solicitud OPTIONS preliminar que no incluye el encabezado. Las llamadas a la API que utilizan el encabezado x-apigw-api-id no llegarán a su API.

¿Le resultó útil este artículo?


¿Necesita asistencia técnica o con la facturación?