¿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?

Resolución

Confirme que la política del uso compartido de recursos entre orígenes (CORS) del origen permite que el origen devuelva el encabezado Access-Control-Allow-Origin

Nota: Si se producen errores al ejecutar comandos de la Interfaz de la línea de comandos de AWS (AWS CLI), asegúrese de que utiliza la versión más reciente de la AWS CLI.

Ejecute el siguiente comando para confirmar que el servidor de origen devuelve el encabezado Access-Control-Allow-Origin. Reemplace ejemplo.com por el encabezado de origen requerido. Reemplace https://www.example.net/video/call/System.generateId.dwr por la URL del recurso que devuelve el error de encabezado.

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

Si la política CORS permite que el servidor de origen devuelva el encabezado Access-Control-Allow-Origin, verá una respuesta similar a la 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

Si no se devuelven encabezados CORS en la respuesta, el servidor de origen no está correctamente configurado para CORS. Configure una política CORS en su origen personalizado o en el origen de Amazon Simple Storage Service (Amazon S3).

Configurar la distribución de CloudFront para reenviar los encabezados adecuados al servidor de origen

Después de configurar una política CORS en el servidor de origen, configure la distribución de CloudFront para reenviar los encabezados de origen al servidor de origen. Si el servidor de origen es un bucket de Amazon S3, configure la distribución para reenviar los siguientes encabezados a Amazon S3:

• Access-Control-Request-Headers
• Access-Control-Request-Method
• Origen

Para reenviar los encabezados al servidor de origen, CloudFront tiene dos políticas predefinidas en función del tipo de origen: CORS-S3Origin y CORS-CustomOrigin.

Para agregar una política predefinida a la distribución:

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 Crear políticas de caché.
5. Elija Create Behavior (Crear comportamiento). O bien, elija Save changes (Guardar cambios) si está editando un comportamiento existente.

Para reenviar los encabezados mediante una política de caché:

1. Crear una política de caché.
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. Complete la configuración de la política de caché en función de los requisitos del comportamiento al que está adjuntando la política.
4. Adjunte 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:

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. Elija Add custom (Agregar personalizado) para agregar encabezados requeridos por el origen que no aparecen en la lista desplegable.
6. Elija Create Behavior (Crear comportamiento). O bien, elija Save changes (Guardar cambios) si está editando un comportamiento existente.

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

Configurar el comportamiento de la caché de la distribución de CloudFront para permitir 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, permita 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. Sin embargo, algunos navegadores web pueden emitir solicitudes para el método OPTIONS. Para activar el método OPTIONS en la distribución de CloudFront:

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 Create Behavior (Crear comportamiento). O bien, elija Save changes (Guardar cambios) si está editando un comportamiento existente.

Configure la política de respuesta de CloudFront para devolver los encabezados Access-Control-Allow-Origin necesarios

Si no se puede acceder al servidor de origen o no se puede configurar para que devuelva los encabezados CORS adecuados, configure un CloudFront para que devuelva los encabezados CORS necesarios. Para configurar, cree políticas de encabezados de respuesta:

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. Para la política de encabezados de respuesta:
   Seleccione una política de respuesta existente en la lista desplegable.
   -o bien-
   Elija Create policy (Crear política) para crear una nueva política de encabezados de respuesta. En la nueva política, en Cross-origin resource sharing (Uso compartido de recursos entre orígenes), active CORS.
5. Complete otros ajustes según sea necesario y elija Create policy (Crear política).
6. En la página Crear comportamiento, elija la política que ha creado en la lista desplegable.
7. Elija Create Behavior (Crear comportamiento). O bien, elija Save changes (Guardar cambios) si está editando un comportamiento existente.

Nota: CloudFront suele implementar los cambios en las distribuciones en cinco minutos. Después de editar la distribución, invalide la caché para borrar las respuestas previamente almacenadas en caché.

Información relacionada

Configuración de CloudFront para respetar la configuración CORS

Configuración del uso compartido de recursos entre orígenes (CORS)

Uso de las políticas de encabezados de respuesta administrada

Agregar un encabezado de uso compartido de recursos entre orígenes (CORS) a la respuesta