AWS API-Gateway mit Angular

Question

Hat jemand das AWS API Gateway mit einem Angular.js-Frontend arbeiten lassen? Ich habe eine Lambda-Funktion, die über eine POST-Methode im API-Gateway verfügbar gemacht wird. Ich habe die Header wie in diesem Dokument angegeben: http://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html

Ich habe es in Postman getestet und es funktioniert super. Ich musste nichts Besonderes tun, aber wenn ich den $http.post() Anruf mache, bekomme ich nur No 'Access-Control-Allow-Origin' Header ist auf der angeforderten Ressource vorhanden. Origin http://localhost:9000 ist daher nicht erlaubt. Die Antwort hatte als Antwort.

Answer 1

Ich habe derzeit eine POST-Funktion über API-Gateway und Lambda, die von einem Angular-Client mit CORS zugegriffen wird. Während ich nicht weiß, was Ihre Konfiguration ist, kann ich alle meine relevanten Einstellungen in der Hoffnung teilen, dass Sie vielleicht etwas finden, was Sie verpasst haben. Die Aktivierung von CORS ist im Moment sehr schmerzhaft (und hoffentlich wird Amazon daran arbeiten, das Problem zu beheben), was in vielen Bereichen mit ziemlich schlechter Dokumentation viele kleine Schritte erfordert.

Ich habe 2 Methoden (OPTIONS und POST) für meine Ressource, und ich werde die entsprechenden Einstellungen für jede Aktie:

POST:
Methode anfordern: Nichts Besonderes. Im Fall meines Endpunkts habe ich eine Option unter Anforderungswege für einen meiner Routenparameter. Ich verwende keine Abfragezeichenfolge, daher ist die URL-Abfragezeichenfolge leer. HTTP Request Headers ist ebenfalls leer.

Integration Anfrage:
Integration Typ: Lambda Mapping-Vorlagen: Ich habe eine (application/json) mit einer Vorlage die entsprechenden Werte aus der Anfrage Körper und Routenparameter meiner Lambda-Funktion zu übergeben.

Antwort der Methode:
Erweitern Sie das Feld mit 200 Statuscodes. Fügen Sie eine Kopfzeile für "Access-Control-Allow-Origin" hinzu und klicken Sie auf das Häkchen, um es zu speichern. Möglicherweise müssen Sie dies für andere Statuscodes tun, die Sie möglicherweise haben.

Integrationsantwort:
Erweitern Sie das 200-Antwortstatusfeld. Ändern Sie unter Mapping-Zuordnungen den Zuordnungswert, um '*' zu enthalten. Die einfachen Anführungszeichen sind erforderlich. Möglicherweise müssen Sie dies für andere Integrationsantworten tun, die Sie möglicherweise haben.

OPTIONEN:
Methode anfordern:
Nichts Besonderes, genau wie die Methode POST.

Integrationsanfrage:
Ich habe es gesetzt, um Integration zu verspotten. Laut Amazon spielt es keine Rolle, also setze ich es nur so, dass alles, was wir wirklich tun müssen, 200 mit den entsprechenden Headern antwortet. Keine Zuordnungsvorlagen

Antwort der Methode:
Erweitern Sie das Feld mit 200 Statuscodes. Fügen Sie die folgenden drei Antwortheader hinzu und speichern Sie sie mit dem Kontrollkästchen: Access-Control-Allow-Header, Access-Control-Allow-Methoden, Access-Control-Allow-Origin. Es sind keine anderen Statuscodes vorhanden.

Integrationsantwort:
Erweitern Sie das 200-Antwortstatusfeld.Die Regex ist leer (auf Standard gesetzt) ​​und diese Methode hat nur eine Antwort von 200. Erweitern Sie die Headerzuordnungen und setzen Sie die Header auf die folgenden Zuordnungswerte:

Access-Control-Allow-Headers: 'Content-Type,X-Amz-Date,Authorization,X-Requested-With' 
Access-Control-Allow-Methods: 'GET,POST,OPTIONS'  
Access-Control-Allow-Origin: '*' 

Es gibt keine Zuordnungsvorlagen.

Dann stellen Sie Ihre API bereit. Hoffentlich erlaubt es jetzt CORS-Anfragen. Ich habe genau das gleiche Problem wie bei Ihnen festgestellt, und ich bin mir ziemlich sicher, dass der X-Requested-With-Wert in Access-Control-Allow-Headers fehlte.

Answer 2

Da Ihr Fehler besagt, dass auf der angeforderten Ressource kein 'Access-Control-Allow-Origin'-Header vorhanden ist. " es klingt wie, wenn Sie versuchen, die API von Angular aufzurufen, erhält es nicht den Access-Control-Allow-Origin-Header, der eingerichtet wurde, als Sie den Amazon-Dokumenten folgten.

Zuerst würde ich überprüfen, dass Sie die richtige URL für die API aufrufen. Amazon zeigt dies auf dem Stufenbildschirm an, aber Sie müssen den Stufennamen an die URL anhängen, die er Ihnen zeigt. Also, wenn Sie auf die „prod“ Bühne im Einsatz und sie zeigen

https://xyz.execute-api.us-west-2.amazonaws.com/my-api 

Sie müssen

nennen

https://xyz.execute-api.us-west-2.amazonaws.com/my-api/prod 

Als nächstes würde ich versuchen, das OPTIONS-Methode auf Ihrem API von Postbote aufrufen. Nachdem Sie die POST-Methode in OPTIONS geändert und die API aufgerufen haben, überprüfen Sie die Kopfzeile im Postman-Ergebnisbereich. Sie wollen, dass die folgend in dort sehen:

Access-Control-Allow-Methods → POST,OPTIONS 
Access-Control-Allow-Origin → * 

Wenn Sie nicht in der Lage sind die in der Antwort, überprüfen Sie die Methode Antwort unter der OPTIONS-Methode in Ihren API zu sehen. Stellen Sie sicher, dass diese Header für die 200-Antwort hinzugefügt werden.

Als letztes Ergebnis können Sie versuchen, die Schaltfläche "Enable CORS" zu verwenden, die Amazon kürzlich hinzugefügt hat. Wählen Sie Ihre Ressource in der linken Baumansicht und suchen Sie nach der Schaltfläche "CORS aktivieren" oben rechts. Klicken Sie darauf, und AWS wird alle mit CORS verbundenen Methoden erneut erstellen.

Ich hoffe, dass einige dieser Schritte helfen!

Answer 3

Api Gateway-Team hier.

Ich hoffe, Sie haben jetzt die neue Funktion 'CORS aktivieren' in der Konsole ausgecheckt. Selbst wenn sich Ihr Entwicklungsworkflow außerhalb der Konsole befindet, können Sie schnell eine Test-API einrichten und die Header-Konfigurationen ansehen, die die Konsole für Sie konfiguriert, und diese dann in Ihre Swagger-Def-Lösung oder die von Ihnen entwickelte Lösung kopieren.

Das Dokumenthandbuch sollte in beiden Fällen weiterhin gelten. Sie benötigen die drei Header: Access-Control-Allow-Methoden, Access-Control-Allow-Origin und Access-Control-Allow-Header. Die Werte davon hängen von Ihrer API ab.

Wenn Sie mir die API-Ressource senden möchten, die Sie aufrufen möchten, kann ich einen Blick von unserer Seite werfen.