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?

Auflösung

Bestätigen Sie, dass die ursprungsübergreifende-Ressourcenfreigabe-Richtlinie (CORS) es dem Ursprung ermöglicht, den „Access-Control-Allow-Origin“-Header zurückzugeben

Hinweis: Wenn Sie beim Ausführen von Befehlen von AWS Command Line Interface (AWS CLI) Fehlermeldungen 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 Original-Server den„ Access-Control-Allow-Origin“-Header zurückgibt. Ersetzen Sie beispiel.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 Original-Server 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 CORS-Header in der Antwort nicht zurückgegeben werden, ist der Original-Server nicht korrekt für CORS eingerichtet. Richten Sie eine CORS-Richtlinie für Ihren benutzerdefinierten Ursprung oder Amazon-Simple-Storage-Service-Ursprung (Amazon S3) ein.

Die CloudFront-Verteilung so konfigurieren, dass die entsprechenden Header an den Original-Server weitergeleitet werden

Nachdem Sie eine CORS-Richtlinie auf Ihrem Ursprungsserver eingerichtet haben, konfigurieren Sie Ihre CloudFront-Verteilung so, dass die Origin-Header an den Original-Server weitergeleitet werden. Wenn Ihr Ursprungsserver ein Amazon-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 die Header an den Ursprungsserver weiterzuleiten, verfügt CloudFront je nach Ursprungstyp über zwei vordefinierte Richtlinien: CORS-S3Origin und CORS-CustomOrigin.

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

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: Um stattdessen Ihre eigene Cache-Richtlinie zu erstellen, lesen Sie Cache-Richtlinien erstellen.
5. Wählen Sie Verhalten erstellen aus. Oder wählen Sie Änderungen speichern, wenn Sie ein vorhandenes Verhalten bearbeiten.

So leiten Sie die Header mithilfe einer Cache-Richtlinie weiter:

1. Cache-Richtlinie 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. Füllen Sie die Cache-Richtlinieneinstellungen gemäß dem Verhalten aus, an das Sie die Richtlinie anhängen.
4. Ordnen Sie die Cache-Richtlinie dem Verhalten Ihrer CloudFront-Verteilung zu.

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 Benutzerdefinierte Header hinzufügen, um für Ihren Ursprung erforderliche Header hinzuzufügen, die nicht in der Dropdown-Liste 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 dann an den Ursprung weiterleitet.

Konfigurieren Sie das Cache-Verhalten der CloudFront-Verteilung, um die OPTIONS-Methode für HTTP-Anfragen zu ermöglichen

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 erlaubt CloudFront nur die GET- und HEAD-Methoden. Einige Webbrowser können jedoch Anfragen für die OPTIONS-Methode stellen. 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 Verhalten erstellen aus. Oder wählen Sie Änderungen speichern, wenn Sie ein vorhandenes Verhalten bearbeiten.

Konfigurieren Sie Ihre CloudFront-Antwortrichtlinie, um die erforderlichen Access-Control-Allow-Origin-Header zurückzugeben

Wenn der Original-Server nicht zugänglich ist oder nicht für die Rückgabe der entsprechenden CORS-Header eingerichtet werden kann, konfigurieren Sie eine CloudFront, um die erforderlichen CORS-Header zurückzugeben. Erstellen Sie zur Konfiguration Richtlinien für Antwortheader:

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. Für die Richtlinie für Antwortheader:
   Wählen Sie in der Dropdownliste eine vorhandene Antwortrichtlinie aus.
   -oder-
   Wählen Sie Richtlinie erstellen, um eine neue Richtlinie für Antwortheader zu erstellen. Aktivieren Sie in der neuen Richtlinie unter Cross-Origin Resource Sharing CORS.
5. Füllen Sie nach Bedarf andere Einstellungen aus und wählen Sie Richtlinie erstellen.
6. Wählen Sie auf der Seite Verhalten erstellen die von Ihnen erstellte Richtlinie aus der Dropdown-Liste 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 Verteilungen normalerweise innerhalb von fünf Minuten bereit. Nachdem Sie Ihre Verteilung bearbeitet haben, machen Sie den Cache ungültig, um zuvor zwischengespeicherte Antworten zu löschen.

Relevante Informationen

Konfigurieren von CloudFront zur Einhaltung der CORS-Einstellungen

Konfigurieren von Cross Origin Resource Sharing (CORS)

Verwenden der Richtlinien für verwaltete Antwortheader

Fügen Sie der Antwort einen Cross-Origin-Resource-Sharing-Header (CORS) hinzu