¿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: 14/09/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 breve

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), consulte lo siguiente:

  • La política del intercambio de recursos de origen cruzado (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” mediante la ejecución de 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 para 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 Configuración de CORS para obtener instrucciones.

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

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

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

Para activar CORS para S3 o para un origen personalizado, se deben enviar los encabezados necesarios al origen. CloudFront tiene dos políticas predefinidas según el tipo de origen utilizado: CORS-S3Origin y CORS-CustomOrigin. Para agregar estas políticas a la distribución, siga estos pasos:

  1. Abra la distribución desde la consola de CloudFront.
  2. Elija la pestaña Behaviors (Comportamientos).
  3. Elija Create Behavior (Crear comportamiento). O bien seleccione un comportamiento existente y, a continuación, elija Edit (Editar).
  4. En Cache key and origin requests (Solicitudes de origen y clave de caché), elija Cache policy and origin request policy (Política de caché y política de solicitud de origen). A continuación, para la política de solicitudes de Origin, elija CORS-S3Origin o CORS-CustomOrigin en la lista desplegable. Para obtener más información, consulte Uso de las políticas de solicitud de origen administradas.
    Nota: Para crear su propia política de caché, consulte las siguientes secciones.
  5. Elija Save Changes (Guardar los cambios). Si va a crear el comportamiento, elija Create Behavior (Crear comportamiento).

Para reenviar los encabezados mediante una política de solicitud de origen, siga estos pasos:

  1. Siga los pasos para crear una política de caché con la consola de CloudFront.
  2. En Cache key settings (Configuración de la clave de caché), en Headers (Encabezados), seleccione Include the following headers (Incluir los siguientes encabezados). En la lista desplegable Add header (Agregar encabezado), elija uno de los encabezados requeridos por el origen.
  3. Finalice todas las demás configuraciones de la política de caché en función de los requisitos del comportamiento al que va a adjuntar la política.
  4. Siga los pasos para adjuntar la política de caché al comportamiento pertinente de la distribución de CloudFront.

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

  1. Abra la distribución desde la consola de CloudFront.
  2. Elija la pestaña Behaviors (Comportamientos).
  3. Elija Create Behavior (Crear comportamiento). O bien seleccione un comportamiento existente y, a continuación, elija Edit (Editar).
  4. En Cache key and origin requests (Solicitudes de origen y clave de caché), seleccione Legacy cache settings (Configuración de caché heredada).
  5. En la lista desplegable Headers (Encabezados), elija los encabezados requeridos por el origen. Si es necesario, elija Add custom (Agregar personalizado) para agregar encabezados requeridos por el origen que no se encuentren en la lista desplegable.
  6. Elija Save Changes (Guardar los cambios). Si va a crear el comportamiento, elija Create Behavior (Crear comportamiento).

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 la política CORS y reenviar los encabezados adecuados, pruebe a permitir el método HTTP OPTIONS en el comportamiento de la caché de la distribución. De forma predeterminada, CloudFront solo permite los métodos GET y HEAD, pero algunos navegadores web pueden emitir solicitudes para el método OPTIONS.

Para activar el método OPTIONS en la distribución de CloudFront, siga estos pasos:

  1. Abra la distribución desde la consola de CloudFront.
  2. Elija la pestaña Behaviors (Comportamientos).
  3. Elija Create Behavior (Crear comportamiento). O bien seleccione un comportamiento existente y, a continuación, elija Edit (Editar).
  4. En Allowed HTTP Methods (Métodos HTTP permitidos), seleccione GET, HEAD, OPTIONS.
  5. Elija Save Changes (Guardar los cambios). Si va a crear el comportamiento, elija Create Behavior (Crear comportamiento).

Nota: CloudFront suele implementar los cambios en la distribución en cinco minutos. Después de editar la distribución, considere la posibilidad de invalidar la caché, ya que, de lo contrario, es posible que siga recibiendo respuestas almacenadas previamente en la caché.


¿Le resultó útil este artículo?


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