Obwohl CORS über API Gateway eingerichtet wurde und der Access-Control-Allow-Origin
Header festgelegt ist, wird beim Versuch, die API von AJAX in Chrome aus aufzurufen, immer noch die folgende Fehlermeldung angezeigt:
XMLHttpRequest kann http://XXXXX.execute-api.us-west-2.amazonaws.com/beta/YYYYY nicht laden . In der angeforderten Ressource ist kein Header 'Access-Control-Allow-Origin' vorhanden. Origin 'null' ist daher kein Zugriff gestattet. Die Antwort hatte den HTTP-Statuscode 403.
Ich habe versucht, die URL über Postman abzurufen, und es wird angezeigt, dass der obige Header erfolgreich übergeben wurde:
Und aus der Antwort von OPTIONS:
Wie kann ich meine API über den Browser aufrufen, ohne zu JSON-P zurückzukehren?
Bucket Policy
?Antworten:
Ich habe das gleiche Problem. Ich habe 10 Stunden benutzt, um herauszufinden.
https://serverless.com/framework/docs/providers/aws/events/apigateway/
quelle
Wenn noch jemand darauf stößt, konnte ich die Grundursache in meiner Anwendung ausfindig machen.
Wenn Sie API-Gateway mit benutzerdefinierten Autorisierern ausführen, sendet API-Gateway einen 401 oder 403 zurück, bevor er tatsächlich auf Ihren Server gelangt. Standardmäßig ist API-Gateway NICHT für CORS konfiguriert, wenn 4xx von einem benutzerdefinierten Autorisierer zurückgegeben wird.
Auch - wenn Sie zufällig einen Statuscode von
0
oder1
von einer Anforderung erhalten, die über API Gateway ausgeführt wird, ist dies wahrscheinlich Ihr Problem.Um dies zu beheben, gehen Sie in der API-Gateway-Konfiguration zu "Gateway-Antworten", erweitern Sie "Standard 4XX" und fügen Sie dort einen CORS-Konfigurationsheader hinzu. dh
Stellen Sie sicher, dass Sie Ihr Gateway erneut bereitstellen - und voila!
quelle
aws apigateway update-gateway-response --rest-api-id "XXXXXXXXX" --response-type "DEFAULT_4XX" --patch-operations op="add",path="/responseParameters/gatewayresponse.header.Access-Control-Allow-Origin",value='"'"'*'"'"'
1) Ich musste dasselbe tun wie @riseres und einige andere Änderungen. Dies sind meine Antwortheader:
2 und
Nach dieser Dokumentation:
http://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html
Wenn Sie in der API-Gateway-Konfiguration einen Proxy für Lambda-Funktionen verwenden, werden den Post- oder Get-Methoden keine zusätzlichen Header hinzugefügt, sondern nur die Optionen. Sie müssen dies manuell in der Antwort tun (Server- oder Lambda-Antwort).
3) Und
Außerdem musste ich die Option "API-Schlüssel erforderlich" in meiner API-Gateway-Post-Methode deaktivieren.
quelle
Wenn Sie alles in Bezug auf dieses Problem ohne Erfolg versucht haben, werden Sie dort landen, wo ich es getan habe. Es stellt sich heraus, dass die vorhandenen CORS-Setup-Anweisungen von Amazon einwandfrei funktionieren. Denken Sie daran, die Bereitstellung erneut durchzuführen . Der CORS-Bearbeitungsassistent führt trotz all seiner netten kleinen grünen Häkchen keine Live-Aktualisierungen Ihrer API durch. Vielleicht offensichtlich, aber es hat mich einen halben Tag lang verblüfft.
quelle
Haben Sie meine Probe Arbeits: Ich gerade eingefügt 'Access-Control-Allow-Origin': '*', innen Header: {} in der NodeJS Lambda - Funktion erzeugt. Ich habe keine Änderungen an der von Lambda generierten API-Schicht vorgenommen.
Hier ist mein NodeJS:
Hier ist mein AJAX-Anruf
quelle
Für Googler:
Hier ist warum:
GET
/POST
ohne Cookies löst keinen Preflight ausOPTIONS
Methode für diesen Pfad, dann sendenAllow-Origin
Header mit Mock - Antworten , wenn die Benutzer AnrufeOPTIONS
, aberGET
/POST
nicht erhaltenAllow-Origin
automatischAllow-Origin
Header enthältOPTIONS
Etwas zusammenfassen:
OPTIONS
wird automatisch von API Gateway generiertOPTIONS
werden vom Browser nur als Vorsichtsmaßnahme verwendet, um die Möglichkeit von CORS auf einem Pfad zu überprüfenGET
.POST
quelle
Ich habe darin eine einfache Lösung gefunden
API-Gateway> Wählen Sie Ihren API-Endpunkt aus> Wählen Sie die Methode aus (in meinem Fall war es der POST).
Jetzt gibt es ein Dropdown-Menü AKTIONEN> CORS aktivieren. Wählen Sie es aus.
Wählen Sie nun erneut die Dropdown-Liste AKTIONEN> API bereitstellen (erneut bereitstellen).
Es funktionierte !
quelle
Ich habe gerade Header zu meiner Lambda-Funktionsantwort hinzugefügt und es hat wie ein Zauber funktioniert
quelle
Ich habe meine zum Laufen gebracht, nachdem ich festgestellt hatte, dass der Lambda-Autor fehlgeschlagen war und aus einem unbekannten Grund in einen CORS-Fehler übersetzt wurde. Eine einfache Lösung für meinen Autorisierer (und einige Autorisierertests, die ich eigentlich hätte hinzufügen sollen) und es hat funktioniert. Für mich war die API-Gateway-Aktion 'CORS aktivieren' erforderlich. Dadurch wurden alle Header und anderen Einstellungen hinzugefügt, die ich in meiner API benötigte.
quelle
Nach dem Ändern Ihrer Funktion oder Ihres Codes Befolgen Sie diese beiden Schritte.
Zuerst aktivieren CORS Dann API bereitstellen jedes Mal.
quelle
Bereitstellung des Codes nach Aktivierung von CORS für beide
POST
undOPTIONS
Arbeit für mich.quelle
Für mich war die Antwort, die ENDLICH ARBEITET hat, der Kommentar von James Shapiro aus Alex Rs Antwort (am zweithäufigsten bewertet). Ich bin in erster Linie auf dieses API-Gateway-Problem gestoßen, indem ich versucht habe, eine in S3 gehostete statische Webseite zu erstellen, auf der die Kontaktseite mit Lambda verarbeitet und eine E-Mail gesendet werden kann. Durch einfaches Überprüfen von [] Default 4XX wurde die Fehlermeldung behoben.
quelle
Ich laufe
aws-serverless-express
und musste in meinem Fall bearbeitensimple-proxy-api.yaml
.Bevor CORS konfiguriert wurde
https://example.com
, habe ich einfach den Namen meiner Site getauscht und über erneut bereitgestelltnpm run setup
, und mein vorhandenes Lambda / Stack wurde aktualisiert.quelle
In meinem Fall musste ich, da ich AWS_IAM als Autorisierungsmethode für API Gateway verwendet habe, meine IAM-Rollenberechtigungen erteilen, um den Endpunkt zu erreichen.
quelle
Eine weitere Hauptursache für dieses Problem könnte ein Unterschied zwischen HTTP / 1.1 und HTTP / 2 sein.
Symptom: Einige Benutzer, nicht alle, haben bei Verwendung unserer Software einen CORS-Fehler gemeldet.
Problem: Der
Access-Control-Allow-Origin
Header fehlte manchmal .Kontext: Wir hatten ein Lambda eingerichtet, das sich der Bearbeitung von
OPTIONS
Anfragen und der Beantwortung der entsprechenden CORS-Header widmete , z. B. demAccess-Control-Allow-Origin
Abgleichen einer WhitelistOrigin
.Lösung: Das API-Gateway scheint alle Header für HTTP / 2-Aufrufe in Kleinbuchstaben umzuwandeln, behält jedoch die Großschreibung für HTTP / 1.1 bei. Dies führte dazu, dass der Zugriff
event.headers.origin
fehlschlug.Überprüfen Sie, ob Sie auch dieses Problem haben:
Angenommen, Ihre API befindet sich unter
https://api.example.com
und Ihr Front-End unterhttps://www.example.com
. Stellen Sie mit CURL eine Anfrage über HTTP / 2:Die Antwortausgabe sollte den Header enthalten:
< Access-Control-Allow-Origin: https://www.example.com
Wiederholen Sie denselben Schritt mit HTTP / 1.1 (oder mit einem Kleinbuchstaben
Origin
):Wenn die
Access-Control-Allow-Origin
Kopfzeile fehlt, sollten Sie beim Lesen derOrigin
Kopfzeile die Groß- und Kleinschreibung überprüfen .quelle
Neben anderen Kommentaren sollten Sie auch auf den Status achten, der von Ihrer zugrunde liegenden Integration zurückgegeben wird, und darauf, ob der Header Access-Control-Allow-Origin für diesen Status zurückgegeben wird.
Wenn Sie "CORS aktivieren" ausführen, wird nur der Status 200 festgelegt. Wenn Sie andere auf dem Endpunkt haben, z. B. 4xx und 5xx, müssen Sie den Header selbst hinzufügen.
quelle
Manchmal verursacht das Lambda-Timeout einen CORS-Fehler. Sie können das Zeitlimit erhöhen, um das Problem zu beheben. Dies kann das Problem beheben. Es repariert meine.
quelle
In meinem Fall habe ich einfach die URL der Abrufanforderung falsch geschrieben. Ein
serverless.yml
, Sie setzencors
auftrue
:und dann senden Sie auf dem Lambda-Handler die Header, aber wenn Sie die Abrufanforderung im Frontend falsch machen, erhalten Sie diesen Header nicht in der Antwort und Sie erhalten diesen Fehler. Überprüfen Sie daher Ihre Anforderungs-URL auf der Vorderseite.
quelle
In Python können Sie dies wie im folgenden Code tun:
quelle