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?

Zuletzt aktualisiert: 14.09.2021

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

Kurzbeschreibung

Um den Fehler „No 'Access-Control-Allow-Origin' header is present on the requested resource“ (Kein 'Access-Control-Allow-Origin'-Header in angeforderter Ressource vorhanden) zu vermeiden, sollten Sie Folgendes überprüfen:

  • 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 OPTIONS-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

Anweisungen 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 (Amazon S3)-Bucket handelt, finden Sie unter CORS-Konfiguration.

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
  • Ursprung

Um CORS entweder für S3 oder einen benutzerdefinierten Ursprung zu aktivieren, müssen Sie die erforderlichen Header an den Ursprung übertragen. CloudFront verfügt über zwei vordefinierte Richtlinien, die von der Art des verwendeten Ursprungs abhängen: CORS-S3Origin und CORS-CustomOrigin. Gehen Sie folgendermaßen vor, um diese Richtlinien zu Ihrer Verteilung hinzuzufügen:

  1. Öffnen Sie die Verteilung von der CloudFront-Konsole aus.
  2. Wählen Sie die Registerkarte Verhalten aus.
  3. Wählen Sie Verhalten erstellen aus. Oder wählen Sie ein vorhandenes Verhalten aus und wählen Sie dann Bearbeiten.
  4. Wählen Sie unter Cache-Schlüssel und Ursprungsanfragen die Option Cache-Richtlinie und Richtlinie für Ursprungsanfragen. Wählen Sie dann für die Richtlinie für Ursprungsanfragen entweder CORS-S3Origin oder CORS-CustomOrigin aus der Dropdown-Liste aus. Weitere Informationen finden Sie unter Verwenden der Richtlinien für verwaltete Ursprungsanfragen.
    Hinweis: Sehen Sie sich die folgenden Abschnitte an, um stattdessen eine eigene Cache-Richtlinie zu erstellen.
  5. Wählen Sie Änderungen speichern aus. Wenn Sie das Verhalten erstellen, wählen Sie Verhalten erstellen aus.

Gehen Sie folgendermaßen vor, um die Header mithilfe einer Richtlinie für Ursprungsanfragen weiterzuleiten:

  1. Befolgen Sie die Schritte, um mithilfe der CloudFront-Konsole eine Cache-Richtlinie zu erstellen.
  2. Wählen Sie unter Einstellungen für Cache-Schlüssel für Header die Option Folgende Header einbeziehen aus. Wählen Sie aus der Dropdown-Liste Header hinzufügen einen der für Ihren Ursprung erforderlichen Header aus.
  3. Vervollständigen Sie alle anderen Einstellungen der Cache-Richtlinie entsprechend den Anforderungen des Verhaltens, dem Sie die Richtlinie zuordnen.
  4. Befolgen Sie die Schritte, um die Cache-Richtlinie dem relevanten Verhalten Ihrer CloudFront-Verteilung zuzuordnen.

Gehen Sie folgendermaßen vor, um die Header mithilfe von älteren Cache-Einstellungen weiterzuleiten:

  1. Öffnen Sie die Verteilung von der CloudFront-Konsole aus.
  2. Wählen Sie die Registerkarte Verhalten aus.
  3. Wählen Sie Verhalten erstellen aus. Oder wählen Sie ein vorhandenes Verhalten aus und wählen Sie dann Bearbeiten.
  4. Wählen Sie unter Cache-Schlüssel und Ursprungsanfragen Veraltete Cache-Einstellungen aus.
  5. Wählen Sie in der Dropdown-Liste Header die für Ihren Ursprung erforderlichen Header aus. Wählen Sie bei Bedarf Benutzerdefinierte Header hinzufügen, um für Ihren Ursprung erforderliche Header hinzuzufügen, die nicht in der Dropdown-Liste enthalten sind.
  6. Wählen Sie Änderungen speichern aus. Wenn Sie das Verhalten erstellen, wählen Sie Verhalten erstellen aus.

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

Das Cache-Verhalten der CloudFront-Verteilung ermöglicht die OPTIONS-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 OPTIONS im Cache-Verhalten Ihrer Verteilung zuzulassen. Standardmäßig lässt CloudFront nur die GET- und HEAD-Methoden zu, aber einige Webbrowser stellen möglicherweise Anfragen für die OPTIONS-Methode.

Gehen Sie folgendermaßen vor, um die OPTIONS-Methode für Ihre CloudFront-Verteilung zu aktivieren:

  1. Öffnen Sie die Verteilung von der CloudFront-Konsole aus.
  2. Wählen Sie die Registerkarte Verhalten aus.
  3. Wählen Sie Verhalten erstellen aus. Oder wählen Sie ein vorhandenes Verhalten aus und wählen Sie dann Bearbeiten.
  4. Wählen Sie für Zulässige HTTP-Methoden GET, HEAD, OPTIONS aus.
  5. Wählen Sie Änderungen speichern aus. Wenn Sie das Verhalten erstellen, wählen Sie Verhalten erstellen aus.

Hinweis: CloudFront stellt Änderungen an Ihrer Verteilung normalerweise innerhalb von fünf Minuten bereit. Nachdem Sie Ihre Verteilung bearbeitet haben, sollten Sie den Cache ungültig machen, da Sie sonst möglicherweise noch Antworten aus dem Cache erhalten.


War dieser Artikel hilfreich?


Benötigen Sie Hilfe zur Fakturierung oder technischen Support?