¿Por qué las imágenes no se cargan en CloudFront?

Descripción corta

Las imágenes se pueden bloquear por problemas de permisos o configuración, o por un error 403 o 404.

Para determinar si un mensaje de error impide que se carguen las imágenes, abra las herramientas para desarrolladores del navegador. En la pestaña Network (Red), busque las llamadas de red para la solicitud de imagen. En el encabezado de respuesta de la solicitud, busque un código de error 404 o 403.

Si el valor de Server (Servidor) es un nombre de servidor de origen personalizado o de Amazon Simple Storage Service (Amazon S3), el origen devuelve el código de error.

Resolución

CloudFront no tiene permiso para acceder al origen de Amazon S3

Si la identidad de acceso de origen (OAI) está configurada en CloudFront para acceder a las imágenes desde un punto de conexión de la API de REST de Amazon S3, confirme que el bucket tiene una política de bucket que otorga a la OAI acceso al contenido del bucket. Sin la política, cuando se realiza una solicitud desde CloudFront, se devuelve un error 403: Access Denied (Acceso denegado) y la imagen no se carga.

Para resolver este error, compruebe los permisos de la política del bucket de S3.

La imagen no existe en el origen de S3 ni en el origen personalizado

Si el archivo de imagen solicitado no existe en el bucket o está en una carpeta diferente, se devolverá un error 403 o 404. El error que se devuelve depende de los permisos del bucket de S3:

• Si tiene el permiso s3:ListBucket en el bucket, Amazon S3 devuelve un error 404: No Such Key (Esa clave no existe).
• Si no tiene el permiso s3:ListBucket, Amazon S3 devuelve un error 403: Access Denied (Acceso denegado).

El patrón de ruta de comportamiento dirige la solicitud a un origen o carpeta incorrectos

Si la distribución tiene varios comportamientos con diferentes patrones de ruta, es posible que la imagen se dirija a un origen incorrecto o a una carpeta en la que el archivo no existe. En este caso, verá un error 404.

Para resolver este error, revise el comportamiento y el patrón de ruta de la distribución. Confirme que la solicitud llega al comportamiento correcto que coincide con el patrón de ruta y que se dirige al origen correcto.

Por ejemplo, en la siguiente configuración, Behavior1 (Comportamiento1) tiene el patrón de ruta “test” (prueba) que dirige la solicitud al origen de S3. Behavior2 (Comportamiento2) tiene el patrón de ruta “Default(*)” (Predeterminado[*]) que dirige el tráfico al origen de Elastic Load Balancing (ELB).

Behavior1: Path pattern = test ====> S3 origin 
Default Behavior: Path pattern = Default (*)=====> ELB origin

Cuando se realiza una solicitud para “https://example.com/test/myimage.png” (https://ejemplo.com/prueba/miimagen.png), la distribución coincide en la ruta con el patrón de ruta Default(*)(Predeterminado[*]) de Behavior2 (Comportamiento2). La solicitud no coincide con el patrón de ruta test (prueba) de Behavior1 (Comportamiento1) porque no hay un comodín al final de test (prueba). Sin un comodín, esta solicitud coincide con el patrón de ruta del comportamiento predeterminado y se dirige al origen de ELB. Como el objeto no existe en el origen de ELB, la solicitud devolverá un error 404 y la imagen no se cargará.

La configuración de la caché de comportamiento no está configurada para el encabezado, las cookies o las cadenas de consulta

El origen puede requerir que se pase un encabezado, cookies o cadenas de consulta en la solicitud para mostrar las imágenes solicitadas. En este caso, cuando se realiza una solicitud mediante CloudFront, las imágenes no se cargan. Sin embargo, si la misma solicitud se realiza directamente al origen, la solicitud se realiza correctamente y el origen devuelve los recursos solicitados.

Para solucionar el problema, determine si el origen requiere ciertos encabezados, cookies o cadenas de consulta para procesar la solicitud. A continuación, asegúrese de que los requisitos estén permitidos en la configuración de la caché de comportamiento.

Utilice una política de solicitud de origen para permitir los valores (encabezados, cookies y cadenas de consulta) que se incluyen en las solicitudes que CloudFront envía a su origen. También puede usar la configuración de caché heredada.

Los metadatos de la imagen no están configurados correctamente en el origen

Si los metadatos de Content-Type (Contenido-Tipo) en el origen no están configurados como image/png (imagen/png), la imagen se descargará en lugar de mostrarse en el navegador.

Para resolver este problema, consulte los metadatos de Content-Type (Contenido-Tipo). Si es necesario, actualice el valor a image/png (imagen/png) para las imágenes en un origen de S3 o un origen personalizado.

El error de CORS hace que las imágenes no se carguen

Si la configuración de CORS en CloudFront o en el origen no es correcta, recibirá el siguiente error: “No 'Access-Control-Allow-Origin' header is present on the requested resource” (No hay ningún encabezado 'Acceso-Control-Allow-Origin' en el recurso solicitado).

Para resolver este problema, confirme que la configuración de CORS esté establecida tanto para CloudFront como para el origen. Para obtener más información, consulte ¿Cómo soluciono el error “No 'Access-Control-Allow-Origin' header is present on the requested resource” (No hay ningún encabezado 'Acceso-Control-Allow-Origin' en el recurso solicitado) de CloudFront?

---