Wie behebe ich den Fehler „Auf der angeforderten Ressource ist kein Header 'Access-Control-Allow-Origin' vorhanden“ von CloudFront?

Lesedauer: 5 Minute
0

Ich erhalte den CORS-Fehler „Auf der angeforderten Ressource ist kein Header 'Access-Control-Allow-Origin' vorhanden'“ in Amazon CloudFront.

Behebung

Bestätigen Sie, dass die CORS-Richtlinie (Cross-Origin Resource Sharing) des Ursprungs es dem Ursprung ermöglicht, den Access-Control-Allow-Origin-Header zurückzugeben

Hinweis: Wenn Sie beim Ausführen von AWS Command Line Interface (AWS CLI)-Befehlen Fehler erhalten, stellen Sie sicher, dass Sie die neueste AWS CLI Version verwenden.

Führen Sie den folgenden Befehl aus, um zu bestätigen, dass der Ursprungsserver den Access-Control-Allow-Origin-Header zurückgibt. Ersetzen Sie example.com durch den erforderlichen Origin-Header. Ersetzen Sie https://www.example.net/video/call/System.generateId.dwr durch die URL der Ressource, die den Header-Fehler zurückgibt.

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

Wenn die CORS-Richtlinie es dem Ursprungsserver ermöglicht, den Access-Control-Allow-Origin-Header zurückzugeben, wird eine Antwort ähnlich der folgenden angezeigt:

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

Wenn in der Antwort keine CORS-Header zurückgegeben werden, ist der Ursprungsserver nicht korrekt für CORS eingerichtet. Richten Sie eine CORS-Richtlinie für Ihren benutzerdefinierten Ursprung oder Amazon Simple Storage Service (Amazon S3)-Ursprung ein.

Konfigurieren Sie die CloudFront-Distribution so, dass sie die entsprechenden Header an den Ursprungsserver weiterleitet

Nachdem Sie eine CORS-Richtlinie auf Ihrem Ursprungsserver eingerichtet haben, konfigurieren Sie Ihre CloudFront-Distribution so, dass die Origin-Header an den Ursprungsserver weitergeleitet werden. Wenn Ihr Ursprungsserver ein Amazon S3 Bucket ist, konfigurieren Sie Ihre Distribution so, dass die folgenden Header an Amazon S3 weitergeleitet werden:

  • Access-Control-Request-Headers
  • Access-Control-Request-Methode
  • Ursprung

Um die Header an den Ursprungsserver weiterzuleiten, hat CloudFront je nach Ihrem Ursprungstyp zwei vordefinierte Richtlinien: CORS-S3Origin und CORS-CustomOrigin.

So fügen Sie Ihrer Distribution eine vordefinierte Richtlinie hinzu:

  1. Öffnen Sie Ihre Distribution von der CloudFront-Konsole.
  2. Wählen Sie die Registerkarte Verhalten aus.
  3. Wählen Sie Verhalten erstellen aus. Oder wählen Sie ein vorhandenes Verhalten aus und klicken Sie dann auf Bearbeiten.
  4. Wählen Sie unter Cache-Schlüssel- und Ursprungsanfragen die Optionen Cache-Richtlinie und Ursprungsanfragerichtlinie aus. Wählen Sie dann für die Ursprungsanfragerichtlinie CORS-S3Origin oder CORS-CustomOrigin aus der Dropdownliste aus. Weitere Informationen finden Sie unter Verwenden der Richtlinien für verwaltete Ursprungsanfragen.
    Hinweis: Informationen zum Erstellen einer eigenen Cache-Richtlinie finden Sie unter Cache-Richtlinien erstellen.
  5. Wählen Sie „Verhalten erstellen“. Oder wählen Sie Änderungen speichern, wenn Sie ein vorhandenes Verhalten bearbeiten.

Zum weiterleiten der Header mithilfe einer Cache-Richtlinie:

  1. Erstellen Sie eine Cache-Richtlinie.
  2. Wählen Sie unter Cache-Schlüsseleinstellungen für Header die Option Folgende Header einbeziehen. Wählen Sie aus der Dropdownliste Kopfzeile hinzufügen einen der für Ihren Ursprung erforderlichen Header aus.
  3. Füllen Sie die Cache-Richtlinieneinstellungen entsprechend dem Verhalten aus, an das Sie die Richtlinie anhängen.
  4. Hängen Sie die Cache-Richtlinie an das Verhalten Ihrer CloudFront-Verteilung an.

Zum weiterleiten der Header mit den alten Cache-Einstellungen:

  1. Öffnen Sie Ihre Distribution von der CloudFront-Konsole.
  2. Wählen Sie die Registerkarte Verhalten aus.
  3. Wählen Sie Verhalten erstellen aus. Oder wählen Sie ein vorhandenes Verhalten aus und klicken Sie dann auf Bearbeiten.
  4. Wählen Sie unter Cache-Schlüssel und Ursprungsanfragen die Option Legacy-Cache-Einstellungen aus.
  5. Wählen Sie in der Dropdownliste Header die Header aus, die für Ihren Ursprung erforderlich sind. Wählen Sie Benutzerdefiniert hinzufügen aus, um Header hinzuzufügen, die für Ihren Ursprung erforderlich sind und nicht in der Dropdownliste erscheinen.
  6. Wählen Sie Verhalten erstellen aus. Oder wählen Sie Änderungen speichern, wenn Sie ein vorhandenes Verhalten bearbeiten.

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

Konfigurieren Sie das Cache-Verhalten der CloudFront-Distribution so, dass die Methode OPTIONS für HTTP-Anfragen zugelassen wird

Wenn Sie nach der Aktualisierung Ihrer CORS-Richtlinie und dem Weiterleiten der entsprechenden Header immer noch Fehler sehen, lassen Sie die OPTIONS-HTTP-Methode im Cache-Verhalten Ihrer Distribution zu. Standardmäßig erlaubt CloudFront nur die Methoden GET und HEAD. Einige Webbrowser können jedoch Anfragen für die Methode OPTIONS stellen. So aktivieren Sie die Methode OPTIONS in Ihrer CloudFront-Distribution:

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

Konfigurieren Sie Ihre CloudFront-Antwortrichtlinie so, dass die erforderlichen Access-Control-Allow-Origin-Header zurückgegeben werden

Wenn auf den Ursprungsserver nicht zugegriffen werden kann oder er nicht für die Rückgabe der entsprechenden CORS-Header eingerichtet werden kann, konfigurieren Sie CloudFront so, dass die erforderlichen CORS-Header zurückgegeben werden. Erstellen Sie Richtlinien für Antwort-Header zur Konfiguration:

  1. Öffnen Sie Ihre Distribution von der CloudFront-Konsole.
  2. Wählen Sie die Registerkarte Verhalten aus.
  3. Wählen Sie Verhalten erstellen aus. Oder wählen Sie ein vorhandenes Verhalten aus und klicken Sie dann auf Bearbeiten.
  4. Für die Richtlinie für Antwort-Header:
    Wählen Sie eine vorhandene Antwortrichtlinie aus der Dropdownliste aus.
    -oder-
    Wählen Sie Richtlinie erstellen aus, um eine neue Richtlinie für Antwort-Header zu erstellen. Aktivieren Sie in der neuen Richtlinie unter Cross-Origin Resource Sharing die Option CORS.
  5. Geben Sie nach Bedarf weitere Einstellungen ein und wählen Sie Richtlinie erstellen.
  6. Wählen Sie auf der Seite „Verhalten erstellen“ die von Ihnen erstellte Richtlinie aus der Dropdownliste aus.
  7. Wählen Sie Verhalten erstellen aus. Oder wählen Sie Änderungen speichern, wenn Sie ein vorhandenes Verhalten bearbeiten.

Hinweis: CloudFront stellt Änderungen an Distributions in der Regel innerhalb von fünf Minuten bereit. Nachdem Sie Ihre Distribution bearbeitet haben, machen Sie den Cache ungültig, um zuvor zwischengespeicherte Antworten zu löschen.

Ähnliche Informationen

Konfiguration von CloudFront zur Berücksichtigung der CORS-Einstellungen

Konfiguration des Cross-Origin Resource Sharing (CORS)

Verwenden der Richtlinien für verwaltete Antwort-Header

Einen CORS Header (Cross-Origin Resource Sharing) der Antwort hinzufügen

AWS OFFICIAL
AWS OFFICIALAktualisiert vor 2 Jahren