Warum werden Bilder nicht über CloudFront geladen?

Letzte Aktualisierung: 02.06.2022

Ich verwende eine Amazon-CloudFront-Verteilung, um Bilder in einem Browser anzuzeigen. Warum werden die Bilder nicht geladen?

Kurzbeschreibung

Bilder können aufgrund von Berechtigungs- oder Konfigurationsproblemen oder aufgrund eines 403- oder 404-Fehlers blockiert werden.

Um festzustellen, ob eine Fehlermeldung das Laden der Bilder verhindert, öffnen Sie die Entwicklertools Ihres Browsers. Suchen Sie auf der Registerkarte Netzwerk die Netzwerkaufrufe für die Bildanforderung. Suchen Sie im Antwort-Header für die Anfrage nach einem 404- oder 403-Fehlercode.

Wenn der Wert von Server entweder auf einen Amazon Simple Storage Service (Amazon S3) oder einen benutzerdefinierten Ursprungsserver-Namen festgelegt ist, gibt der Ursprung den Fehlercode zurück.

Auflösung

CloudFront hat keine Berechtigung für den Zugriff auf den Amazon-S3-Ursprung

Wenn Sie Ursprungszugriffsidentität (OAI) in CloudFront konfiguriert haben, um auf Bilder von einem Rest-API-Endpunkt von Amazon S3 zuzugreifen, stellen Sie sicher, dass der Bucket über eine Bucket-Richtlinie verfügt, die OAI-Zugriff auf den Inhalt im Bucket gewährt. Ohne die Richtlinie wird bei einer Anfrage von CloudFront ein 403: „Zugriff verweigert“-Fehler zurückgegeben und das Bild wird nicht geladen.

Überprüfen Sie Ihre S3-Bucket-Richtlinienberechtigungen, um diesen Fehler zu beheben.

Das Bild existiert nicht im S3-Ursprung oder benutzerdefinierten Ursprung

Wenn die angeforderte Bilddatei nicht im Bucket existiert oder in einem anderen Ordner abgelegt wird, wird ein 403- oder 404-Fehler zurückgegeben. Der Fehler, der zurückgegeben wird, hängt von den Berechtigungen Ihres S3-Buckets ab:

  • Wenn Sie die s3:ListBucket-Berechtigung für den Bucket haben, gibt Amazon S3 den Fehler 404: „Kein solcher Schlüssel“ zurück.
  • Wenn Sie nicht über die s3:ListBucket-Berechtigung verfügen, gibt Amazon S3 den Fehler 403: „Zugriff verweigert“ zurück.

Das Verhaltenspfadmuster leitet die Anfrage an einen falschen Ursprung oder Ordner

Wenn Ihre Verteilung mehrere Verhaltensweisen mit unterschiedlichen Pfadmustern aufweist, wird das Bild möglicherweise an einen falschen Ursprung oder einen Ordner gerichtet, in dem die Datei nicht existiert. In diesem Fall wird ein 404-Fehler angezeigt.

Überprüfen Sie das Verhalten und das Pfadmuster für Ihre Verteilung, um diesen Fehler zu beheben. Vergewissern Sie sich, dass die Anfrage auf dem richtigen Verhalten landet, das dem Pfadmuster entspricht, und zum richtigen Ursprung geleitet wird.

In der folgenden Konfiguration hat Verhalten1 beispielsweise das Pfadmuster „test“, das die Anforderung an den S3-Ursprung weiterleitet. Verhalten 2 hat das Pfadmuster „Default (*)“, das den Datenverkehr an den Elastic Load Balancing (ELB)-Ursprung leitet.

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

Wenn eine Anfrage für „https://example.com/test/myimage.png“ gestellt wird, stimmt die Verteilung den Pfad mit dem Pfadmuster Default (*) von Verhalten2 ab. Die Anfrage entspricht nicht dem Pfadmuster test von Verhalten1, da am Ende des test kein Platzhalter steht. Ohne Platzhalter entspricht diese Anforderung dem Pfadmuster für das Standardverhalten und wird zum ELB-Ursprung geleitet. Da das Objekt im ELB-Ursprung nicht existiert, gibt die Anforderung einen 404-Fehler zurück und das Bild wird nicht geladen.

Die Verhaltens-Cache-Einstellungen sind nicht für Header, Cookies oder Abfragezeichenfolgen konfiguriert

Der Ursprung kann erfordern, dass ein bestimmter Header, Cookies oder Abfragezeichenfolgen in der Anfrage übergeben werden, um die angeforderten Bilder bereitzustellen. In diesem Fall werden die Bilder nicht geladen, wenn eine Anfrage mit CloudFront gestellt wird. Wenn dieselbe Anfrage jedoch direkt an den Ursprung gestellt wird, ist die Anforderung erfolgreich und der Ursprung gibt die angeforderten Ressourcen zurück.

Ermitteln Sie zur Fehlerbehebung, ob der Ursprung bestimmte Header, Cookies oder Abfragezeichenfolgen benötigt, um die Anfrage zu verarbeiten. Vergewissern Sie sich dann, dass die Anforderungen in den Verhaltens-Cache-Einstellungen zulässig sind.

Verwenden Sie eine Richtlinie für Ursprungsanfragen, um die Werte (Header, Cookies und Abfragezeichenfolgen) zuzulassen, die in Anforderungen enthalten sind, die CloudFront an Ihren Ursprung sendet. Sie können auch Legacy-Cache-Einstellungen verwenden.

Metadaten für das Bild sind nicht korrekt auf dem Ursprung festgelegt

Wenn Metadaten für Content-Type im Ursprung nicht auf image/png festgelegt sind, wird das Bild heruntergeladen, anstatt es in Ihrem Browser anzuzeigen.

Um dieses Problem zu lösen, überprüfen Sie die Content-Type-Metadaten. Aktualisieren Sie bei Bedarf den Wert auf image/png für die Bilder in einem S3- oder benutzerdefinierten Ursprung.

Ein CORS-Fehler führt dazu, dass die Bilder nicht geladen werden

Wenn die CORS-Konfiguration in CloudFront oder der Ursprung nicht richtig eingestellt ist, erhalten Sie die Fehlermeldung: „Auf der angeforderten Ressource ist kein Header 'Access-Control-Allow-Origin' vorhanden“.

Vergewissern Sie sich, dass die CORS-Konfiguration sowohl für CloudFront als auch für den Ursprung eingerichtet ist, um dieses Problem zu beheben. Weiter Informationen finden Sie unter Wie behebe ich den Fehler „Auf der angeforderten Ressource ist kein Header 'Access-Control-Allow-Origin' vorhanden“ in CloudFront?


War dieser Artikel hilfreich?


Benötigen Sie Hilfe zur Fakturierung oder technischen Support?