J'utilise une distribution Amazon CloudFront pour afficher des images dans un navigateur. Pourquoi les images ne se chargent-elles pas ?
Brève description
Les images peuvent être bloquées en raison de problèmes d'autorisation ou de configuration, ou en raison d'une erreur 403 ou 404.
Pour déterminer si un message d'erreur empêche le chargement des images, ouvrez les outils de développement de votre navigateur. Dans l'onglet Réseau, recherchez les appels réseau pour la demande d'image. Dans l'en-tête de réponse de la demande, recherchez un code d'erreur 404 ou 403.
Si la valeur de Server (Serveur) est définie sur un Amazon Simple Storage Service (Amazon S3) ou sur un nom de serveur d'origine personnalisé, l'origine renvoie le code d'erreur.
Résolution
CloudFront n'est pas autorisé à accéder à l'origine Amazon S3
Si l'identité d'accès d'origine (OAI) est configurée dans CloudFront pour accéder aux images à partir d'un point de terminaison de l'API Rest Amazon S3, vérifiez que le compartiment possède une politique de compartiment qui accorde l'accès OAI au contenu du compartiment. Sans cette politique, lorsqu'une demande est effectuée depuis CloudFront, une erreur 403 : Accès refusé est renvoyée et l'image ne se charge pas.
Pour résoudre cette erreur, vérifiez les Politiques de compartiment Amazon S3.
L'image n'existe pas dans l'origine S3 ou l'origine personnalisée
Si le fichier image demandé n'existe pas dans le compartiment ou est placé dans un autre dossier, une erreur 403 ou 404 est renvoyée. L'erreur renvoyée dépend des autorisations de votre compartiment S3 :
Le modèle de chemin de comportement dirige la demande vers une origine ou un dossier incorrect
Si votre distribution présente plusieurs comportements avec des modèles de chemin différents, l'image peut être dirigée vers une origine incorrecte ou vers un dossier dans lequel le fichier n'existe pas. Dans ce cas, une erreur 404 s'affiche.
Pour résoudre cette erreur, passez en revue le comportement et le modèle de chemin de votre distribution. Vérifiez que la requête aboutit au comportement correct correspondant au modèle de chemin et qu'elle est dirigée vers l'origine correcte.
Par exemple, dans la configuration suivante, Behavior1 possède le modèle de chemin « test » qui achemine la demande vers l'origine S3. Le comportement 2 possède le modèle de chemin « Default(*) » qui achemine le trafic vers l'origine de l'Elastic Load Balancing (ELB).
Behavior1: Path pattern = test ====> S3 origin
Default Behavior: Path pattern = Default (*)=====> ELB origin
Lorsqu'une demande pour « https://example.com/test/myimage.png » est faite, la distribution fait correspondre le chemin avec le modèle de chemin Default (*) de Behavior2. La requête ne correspond pas au de modèle de chemin test de Behavior1 car il n'y a pas de caractère générique à la fin de test. Sans caractère générique, cette requête correspond au modèle de chemin pour le comportement par défaut et est dirigée vers l'origine ELB. Comme l'objet n'existe pas dans l'origine ELB, la requête renvoie une erreur 404 et l'image ne se charge pas.
Les paramètres du cache de comportement ne sont pas configurés pour l'en-tête, les cookies ou les chaînes de requête
L'origine peut exiger qu'un certain en-tête, des cookies ou des chaînes de requête soient transmis dans la demande de diffusion des images demandées. Dans ce cas, lorsqu'une demande est effectuée à l'aide de CloudFront, les images ne se chargent pas. Toutefois, si la même demande est faite directement à l'origine, la demande est réussie et l'origine renvoie les ressources demandées.
Pour résoudre le problème, déterminez si l'origine nécessite certains en-têtes, cookies ou chaînes de requête afin de traiter la demande. Ensuite, assurez-vous que les exigences sont autorisées dans les Behavior cache settings (Paramètres du cache de comportement).
Utilisez une origin request policy (politique de demande d'origine) pour autoriser les valeurs (en-têtes, cookies et chaînes de requête) incluses dans les demandes que CloudFront envoie à votre origine. Vous pouvez également utiliser les Legacy cache settings (Paramètres de cache hérités).
Les métadonnées de l'image ne sont pas correctement définies sur l'origine
Si les métadonnées pour Content-Type dans l'origine ne sont pas définies sur image/png, l'image sera téléchargée au lieu de s'afficher dans votre navigateur.
Pour résoudre ce problème, vérifiez les métadonnées Content-Type. Si nécessaire, mettez à jour la valeur image/png pour les images dans une origine S3 ou personnalisée.
Une erreur CORS entraîne le non-chargement des images
Si la configuration CORS dans CloudFront ou l'origine n'est pas correctement définie, le message d'erreur suivant s'affiche : « No Access-Control-Allow-Origin header is present on the requested resource. » (« Aucun en-tête Access-Control-Allow-Origin présent dans la ressource demandée »).
Pour résoudre ce problème, vérifiez que la configuration CORS est configurée à la fois pour CloudFront et pour l'origine. Pour de plus amples informations, veuilleu consulter Comment éliminer l'erreur « No Access-Control-Allow-Origin header is present on the requested resource » (Aucun en-tête Access-Control-Allow-Origin présent dans la ressource demandée) depuis CloudFront ?