¿Cómo soluciono el error “No 'Access-Control-Allow-Origin' header is present on the requested resource” (No hay ningún encabezado 'Access-Control-Allow-Origin' en el recurso solicitado) de CloudFront?

Última actualización: 19-01-2021

Reenvío el encabezado de origen de mi distribución de Amazon CloudFront, pero recibo el error “No 'Access-Control-Allow-Origin' header is present on the requested resource” (No hay ningún encabezado 'Access-Control-Allow-Origin' en el recurso solicitado). ¿Cómo soluciono este error?

Descripción corta

Para evitar el error “No 'Access-Control-Allow-Origin' header is present on the requested resource” (No hay ningún encabezado 'Access-Control-Allow-Origin' en el recurso solicitado), verifique lo siguiente:

  • La política de uso compartido de recursos entre orígenes (CORS) del origen permite que el origen devuelva el encabezado “Access-Control-Allow-Origin”.
  • La distribución de CloudFront reenvía los encabezados adecuados.
  • El comportamiento de la caché de la distribución de CloudFront permite el método OPTIONS para las solicitudes HTTP.

Resolución

La política CORS del origen permite que el origen devuelva el encabezado “Access-Control-Allow-Origin”

Verifique si el origen devuelve el encabezado “Access-Control-Allow-Origin” al ejecutar un comando curl similar al siguiente:

curl -H "origin: example.com" -v "https://www.anything.net/video/call/System.generateId.dwr"

Si la política CORS permite que el origen devuelva el encabezado, el comando devuelve un mensaje similar al siguiente:

HTTP/1.1 200 OK
Server: nginx/1.10.2
Date: Mon, 01 May 2018 03:06:41 GMT
Content-Type: text/html
Content-Length: 3770
Last-Modified: Thu, 16 Mar 2017 01:50:52 GMT
Connection: keep-alive
ETag: "58c9ef7c-eba"
Access-Control-Allow-Origin:
    example.com
Accept-Ranges: bytes

Para actualizar la política CORS de un origen en NGINX, consulte CORS en NGINX para obtener instrucciones. Para actualizar la política de un origen que es un bucket de Amazon Simple Storage Service (Amazon S3), consulte Habilitar el uso compartido de recursos entre orígenes (CORS) para obtener instrucciones.

La distribución de CloudFront reenvía los encabezados adecuados

Después de configurar CORS en su origen, configure su distribución de CloudFront para reenviar los encabezados que requiere su origen. Si su origen es un bucket de S3, normalmente debe configurar su distribución para reenviar los siguientes encabezados a Amazon S3:

  • Access-Control-Request-Headers
  • Access-Control-Request-Method
  • Origin

Para reenviar los encabezados utilizando una política de caché, siga estos pasos:

  1. Siga los pasos para crear una política de caché utilizando la consola de CloudFront.
  2. En Cache key contents (Contenido de la clave de caché), en Headers (Encabezados), seleccione Whitelist (Lista de permitidos). En la lista de encabezados, seleccione uno de los encabezados requeridos por su origen. Después, elija Add header (Agregar encabezado). Repita este paso para todos los encabezados requeridos por su origen.
  3. Complete todas las demás configuraciones de la política de caché en función de los requisitos del comportamiento al que está adjuntando la política.
  4. Siga los pasos para adjuntar la política de caché al comportamiento pertinente de su distribución de CloudFront.

Para reenviar los encabezados utilizando la configuración de caché heredada, siga estos pasos:

  1. Abra su distribución desde la consola de CloudFront.
  2. Elija la pestaña Behaviors (Comportamientos).
  3. Elija Create Behavior (Crear comportamiento) o un comportamiento existente y, a continuación, Edit (Editar).
  4. En Cache and origin request settings (Configuración de solicitudes de origen y caché), seleccione Use legacy cache settings (Utilizar configuración de caché heredada). 
  5. En Cache Based on Selected Request Headers (Caché basada en encabezados de solicitud seleccionados), elija Whitelist (Lista de permitidos).
  6. En Whitelist Headers (Encabezados de la lista de permitidos), elija los encabezados requeridos por su origen en el menú de la izquierda. A continuación, elija Add (Agregar).
  7. Elija Yes, Edit (Sí, editar).

Nota: Asegúrese también de reenviar el encabezado como parte de su solicitud de cliente a CloudFront, que CloudFront reenvía al origen.

El comportamiento de la caché de la distribución de CloudFront permite el método OPTIONS para las solicitudes HTTP

Si sigue viendo errores después de actualizar su política CORS y reenviar los encabezados adecuados, pruebe a permitir el método HTTP OPTIONS en el comportamiento de la caché de su distribución. De forma predeterminada, CloudFront solo permite los métodos GET y HEAD, pero algunos navegadores web podrían emitir solicitudes para el método OPTIONS.

Para habilitar el método OPTIONS para su distribución de CloudFront, siga estos pasos:

  1. Abra su distribución desde la consola CloudFront.
  2. Elija la pestaña Behaviors (Comportamientos).
  3. Elija Create Behavior (Crear comportamiento) o un comportamiento existente, y luego elija Edit (Editar).
  4. En Allowed HTTP Methods (Métodos HTTP permitidos), seleccione GET, HEAD, OPTIONS.
  5. Elija Yes, Edit (Sí, editar).

Nota: CloudFront suele implementar los cambios en su distribución en cinco minutos. Después de hacer cambios en su distribución, considere la posibilidad de invalidar la caché porque, de lo contrario, podría seguir obteniendo respuestas previamente almacenadas en la caché.


¿Le resultó útil este artículo?


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