¿Cómo puedo solucionar el error «No "Access-Control-Allow-Origin" header is present on the requested resource» de CloudFront?

5 minutos de lectura
0

Se muestra el error CORS «No "Access-Control-Allow-Origin"» en el recurso que he solicitado en Amazon CloudFront.

Solución

Confirmación de si la política de intercambio de recursos entre orígenes (CORS) del origen permite que este devuelva el encabezado Access-Control-Allow-Origin

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

Ejecute el siguiente comando para confirmar que el servidor de origen devuelve el encabezado Access-Control-Allow-Origin. Sustituya example.com por el encabezado de origen requerido. Sustituya 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 los encabezados CORS no se devuelven en la respuesta, significa que el servidor de origen no está configurado correctamente para CORS. Configure una política CORS en su origen personalizado o el origen de Amazon Simple Storage Service (Amazon S3).

Configuración de la distribución de CloudFront para reenviar los encabezados apropiados 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 su 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
  • Origin

Para reenviar los encabezados al servidor de origen, CloudFront tiene dos políticas predefinidas según el tipo de origen: CORS-S3Origin y CORS-CustomOrigin.

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

  1. Abra su distribución desde la consola de CloudFront.
  2. Seleccione la pestaña Comportamientos.
  3. Elija Create Behavior. También puede seleccionar un comportamiento existente y elegir luego Editar.
  4. En Cache key and origin requests, elija Cache policy and origin request policy. A continuación, en Origin request policy, elija CORS-S3Origin o CORS-CustomOrigin en la lista desplegable. Para obtener más información, consulte Using the managed origin request policies.
    Nota: En su lugar, para crear su propia política de caché, consulte Creating cache policies.
  5. Elija Create Behavior. Si está editando un comportamiento existente, elija Guardar cambios.

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

  1. Cree una política de caché.
  2. En Cache key settings, en Headers, seleccione Include the following headers. En la lista desplegable Agregar encabezado, elija uno de los encabezados que requiere el origen.
  3. Complete la configuración de la política de caché según lo requiera el comportamiento al que está asociando la política.
  4. Asocie la política de caché al comportamiento de su distribución de CloudFront.

Para reenviar los encabezados mediante la configuración de caché heredada:

  1. Abra su distribución desde la consola de CloudFront.
  2. Seleccione la pestaña Comportamientos.
  3. Elija Create Behavior. También puede seleccionar un comportamiento existente y elegir luego Editar.
  4. En Cache key and origin requests, seleccione Legacy cache settings.
  5. En la lista desplegable Headers, elija los encabezados que requiere el origen. Seleccione Añadir personalizado para añadir los encabezados que requiere el origen y que no aparecen en la lista desplegable.
  6. Elija Create Behavior. Si está editando un comportamiento existente, elija Guardar cambios.

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

Configuración del comportamiento de la caché de la distribución de CloudFront para permitir el método OPTIONS para las solicitudes HTTP

Si los errores persisten después de actualizar su política de CORS y reenviar los encabezados correspondientes, permita que el método HTTP OPTIONS influya en el comportamiento de la caché de su 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 su distribución de CloudFront:

  1. Abra su distribución desde la consola de CloudFront.
  2. Seleccione la pestaña Comportamientos.
  3. Elija Create Behavior. También puede seleccionar un comportamiento existente y elegir luego Editar.
  4. En Métodos HTTP permitidos, seleccione GET, HEAD, OPTIONS.
  5. Elija Create Behavior. Si está editando un comportamiento existente, elija Guardar cambios.

Configuración de la política de respuesta de CloudFront para que devuelva 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 CloudFront para que devuelva los encabezados CORS necesarios. Para ello, cree políticas de encabezados de respuesta:

  1. Abra su distribución desde la consola de CloudFront.
  2. Seleccione la pestaña Comportamientos.
  3. Elija Create Behavior. También puede seleccionar un comportamiento existente y elegir luego Editar.
  4. En Response headers policy:
    Seleccione una política de respuesta existente de la lista desplegable.
    Alternativa:
    Elija Crear política para crear una nueva política de encabezados de respuesta. En la nueva política, en Uso compartido de recursos entre orígenes, active CORS.
  5. Rellene otros ajustes según sea necesario y seleccione Crear política.
  6. En la página Create Behavior, elija la política que ha creado de la lista desplegable.
  7. Elija Create Behavior. Si está editando un comportamiento existente, elija Guardar cambios.

Nota: Por lo general, CloudFront implementa los cambios en las distribuciones en cinco minutos. Después de editar la distribución, anule la validez de la caché para borrar las respuestas almacenadas anteriormente en la caché.

Información relacionada

Configuring CloudFront to respect CORS settings

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

Using the managed response headers policies

Add a cross-origin resource sharing (CORS) header to the response

OFICIAL DE AWS
OFICIAL DE AWSActualizada hace 2 años