Wie behebe ich den Fehler „No 'Access-Control-Allow-Origin' header is present on the requested resource“ (Kein 'Access-Control-Allow-Origin'-Header in angeforderter Ressource vorhanden) in CloudFront?

Letzte Aktualisierung: 19.01.2021

Ich leite den Ursprungs-Header meiner Amazon-CloudFront-Distribution weiter, erhalte jedoch die Fehlermeldung, dass kein „Access-Control-Allow-Origin“-Header auf der angeforderten Ressource vorhanden ist. Wie kann ich dieses Problem beheben?

Kurzbeschreibung

Um den Fehler „Kein „Access-Control-Allow-Origin“-Header ist auf der angeforderten Ressource vorhanden“ zu vermeiden, überprüfen Sie Folgendes:

  • Die ursprungsübergreifende-Ressourcenfreigabe-Richtlinie (CORS) des Ursprungs ermöglicht es dem Ursprung, den „Access-Control-Allow-Origin“-Header zurückzugeben.
  • Die CloudFront-Verteilung leitet die entsprechenden Header weiter.
  • Das Cache-Verhalten der CloudFront-Verteilung ermöglicht die OPTIONEN-Methode für HTTP-Anfragen.

Auflösung

Die CORS-Richtlinie des Ursprungs ermöglicht dem Ursprung, den Header „Access-Control-Allow-Origin“ zurückzugeben

Überprüfen Sie, ob der Ursprung den Header „Access-Control-Allow-Origin“ zurückgibt, indem Sie einen curl-Befehl ähnlich dem folgenden ausführen:

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

Wenn die CORS-Richtlinie es dem Ursprung erlaubt, den Header zurückzugeben, gibt der Befehl eine Nachricht ähnlich der folgenden zurück:

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

Informationen zum Aktualisieren der CORS-Richtlinie für einen Ursprung auf NGINX finden Sie unter CORS auf NGINX. Informationen zum Aktualisieren der Richtlinie für einen Ursprung, bei dem es sich um einen Amazon-Simple-Storage-Service-Bucket (Amazon S3) handelt, finden Sie unter Aktivieren der ursprungsübergreifenden Ressourcenfreigabe (CORS) für Anweisungen.

Die CloudFront-Verteilung leitet die entsprechenden Header weiter

Nachdem Sie CORS auf Ihrem Ursprung eingerichtet haben, konfigurieren Sie Ihre CloudFront-Verteilung so, dass die von Ihrem Ursprung benötigten Header weitergeleitet werden. Wenn Ihr Ursprung ein S3-Bucket ist, müssen Sie Ihre Verteilung normalerweise so konfigurieren, dass die folgenden Header an Amazon S3 weitergeleitet werden:

  • Access-Control-Request-Headers
  • Access-Control-Request-Method
  • Origin

Um die Header mithilfe einer Cache-Richtlinie weiterzuleiten, gehen Sie folgendermaßen vor:

  1. Folgen Sie den Schritten um eine Cache-Richtlinie mithilfe der CloudFront-Konsole zu erstellen.
  2. Wählen Sie unter Cache-Schlüsselinhalte für Header die Option Whitelist aus. Wählen Sie aus der Liste der Kopfzeilen eine der Kopfzeilen aus, die für Ihren Ursprung erforderlich sind. Wählen Sie dann Header hinzufügen. Wiederholen Sie diesen Schritt für alle Header, die für Ihren Ursprung erforderlich sind.
  3. Vervollständigen Sie alle anderen Einstellungen der Cache-Richtlinie basierend auf den Anforderungen des Verhaltens, dem Sie die Richtlinie anhängen.
  4. Befolgen Sie die Schritte, um die Cache-Richtlinie an das relevante Verhalten Ihrer CloudFront-Verteilung anzuhängen.

Um die Header mit Legacy-System-Cache-Einstellungen weiterzuleiten, führen Sie diese Schritte aus:

  1. Öffnen Sie Ihre Verteilung über die CloudFront-Konsole.
  2. Wählen Sie die Registerkarte Verhalten.
  3. Wählen Sie Verhalten erstellen oder ein vorhandenes Verhalten auswählen und dann Bearbeiten.
  4. Für Cache- und Ursprungsanforderungs-Einstellungen wählen Sie Alte Cache-Einstellungen verwenden.
  5. Für Cache basierend auf ausgewählten Anforderungsheadern wählen Sie Whitelist.
  6. Unter Whitelist-Header, Wählen Sie die für Ihren Ursprung erforderlichen Header aus dem Menü auf der linken Seite. Wählen Sie dann Hinzufügen.
  7. Wählen Sie Ja, bearbeiten.

Hinweis: Stellen Sie sicher, dass Sie den Header auch als Teil Ihrer Clientanfrage an CloudFront weiterleiten, die CloudFront an den Ursprung weiterleitet.

Das Cache-Verhalten der CloudFront-Distribution ermöglicht die OPTIONEN-Methode für HTTP-Anfragen

Wenn nach der Aktualisierung Ihrer CORS-Richtlinie und der Weiterleitung der entsprechenden Header immer noch Fehler angezeigt werden, versuchen Sie, die HTTP-Methode OPTIONEN im Cache-Verhalten Ihrer Verteilung zuzulassen. Standardmäßig lässt CloudFront nur die GET- und HEAD-Methoden zu, aber einige Webbrowser senden möglicherweise Anfragen für die OPTIONEN-Methode.

Um die OPTIONEN-Methode in Ihrer CloudFront-Verteilung zu aktivieren, gehen Sie folgendermaßen vor:

  1. Öffnen Sie Ihre Verteilung über die CloudFront-Konsole.
  2. Wählen Sie die Registerkarte Verhalten.
  3. Wählen Sie Verhalten erstellen oder wählen Sie ein vorhandenes Verhalten und wählen Sie dann Bearbeiten.
  4. Wählen Sie für Erlaubte HTTP-Methoden GET, HEAD, OPTIONS .
  5. Wählen Sie Ja, bearbeiten.

Hinweis: CloudFront stellt normalerweise Änderungen an Ihrer Verteilung innerhalb von fünf Minuten bereit. Nachdem Sie Änderungen an Ihrer Verteilung vorgenommen haben, sollten Sie den Cache ungültig machen, da Sie sonst möglicherweise weiterhin im Cache gespeicherte Antworten erhalten.


War dieser Artikel hilfreich?


Benötigen Sie Hilfe zur Rechnungsstellung oder technischen Support?