Gateway API AWS con angolare

Question

Qualcuno ha ottenuto che il gateway API AWS funzioni con un front-end Angular.js? Ho una funzione lambda che è esposta tramite un metodo POST nel gateway API. Ho impostato le intestazioni come indicato da questo documento: http://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html

L'ho provato in Postman e funziona benissimo. Non ho dovuto fare niente di speciale, ma quando faccio la chiamata $http.post() ottengo solo l'intestazione No 'Access-Control-Allow-Origin' presente sulla risorsa richiesta. L'origine http://localhost:9000 non è quindi consentita l'accesso. La risposta ha avuto HTTP status code 500. come risposta.

Answer 1

Attualmente ho una funzione POST che funziona tramite API Gateway e Lambda a cui si accede da un client Angolare con CORS. Anche se non so quale sia la tua configurazione, posso condividere tutte le mie impostazioni pertinenti nella speranza che tu possa trovare qualcosa che ti è sfuggito. Abilitare CORS è un bel problema al momento (e si spera che qualcosa stia lavorando su Amazon) richiedendo molti piccoli passi in molte aree con una documentazione piuttosto scarsa.

ho 2 metodi (opzioni e POST) per la mia risorsa e io condividere le impostazioni rilevanti per ogni:

POST:
metodo di richiesta: Niente di speciale. Nel caso del mio endpoint, ho un'opzione in Percorsi di richiesta per uno dei miei parametri di percorso. Non sto usando una stringa di query, quindi la stringa di query URL è vuota. Anche le intestazioni delle richieste HTTP sono vuote.

Integrazione Richiesta:
integrazione Tipo: modelli Lambda Mapping: ho una (application/json) con un modello di passare i valori appropriati del corpo della richiesta e parametri di percorso per la mia funzione lambda.

Risposta del metodo:
Espandere il campo del codice di stato 200. Aggiungi un'intestazione per "Access-Control-Allow-Origin" e fai clic sul pulsante con il segno di spunta per salvarlo. Potrebbe essere necessario farlo per qualsiasi altro codice di stato che potresti avere.

Risposta di integrazione:
Espandere il campo di stato 200 risposte. In Mappature dell'intestazione, modificare il valore di mappatura per contenere '*'. Sono richieste le virgolette singole. Potrebbe essere necessario farlo per eventuali altre risposte di integrazione che potresti avere.

OPZIONI:
metodo di richiesta:
Niente di speciale, proprio come il metodo POST.

Richiesta di integrazione:
L'ho impostato per simulare l'integrazione. Secondo Amazon, non importa, quindi l'ho appena impostato per deridere perché tutto ciò che dobbiamo veramente fare è rispondere 200 con le intestazioni appropriate. Nessun modello di mappatura.

Risposta del metodo:
Espandere il campo del codice di stato 200. Aggiungere le seguenti 3 intestazioni di risposta e salvarle con la casella di controllo: Access-Control-Allow-Headers, Access-Control-Allow-Methods, Access-Control-Allow-Origin. Non ci sono altri codici di stato presenti.

Risposta di integrazione:
Espandere il campo di stato 200 risposte.La regex è vuota (impostata su default) e questo metodo ha solo 200 risposte. Espandi i mapping di intestazione e imposta le intestazioni ai seguenti valori di mapping:

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

Non ci sono modelli di mappatura.

Quindi distribuire l'API. Speriamo che ora consenta richieste CORS. Ho riscontrato lo stesso identico problema che hai fatto e sono abbastanza certo che il problema mancasse il valore X-Requested-With in Access-Control-Allow-Headers.

Answer 2

Poiché il tuo errore indica "No" l'intestazione Access-Control-Allow-Origin è presente sulla risorsa richiesta. " sembra che quando provi a chiamare l'API da Angular, non ottieni l'intestazione Access-Control-Allow-Origin che è stata configurata quando hai seguito i documenti Amazon.

Per prima cosa, vorrei verificare che tu stia chiamando l'URL giusto per l'API. Amazon visualizza questo nella schermata degli stage ma devi aggiungere il nome del palco all'URL che ti mostrano. Quindi, se è stato distribuito allo stadio "pungolo" e mostrano

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

È necessario chiamare

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

Avanti, vorrei provare a chiamare il metodo OPTIONS sul API da postino. Dopo aver cambiato il metodo POST in OPTIONS e aver chiamato l'API, controlla l'intestazione nella sezione dei risultati di Postman. Volete vedere il seguente in là:

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

Se non si è in grado di vedere coloro che nella risposta, doppio controllare la risposta Metodo secondo il metodo OPTIONS nella vostra API. Assicurati che quelle intestazioni aggiunte per la risposta 200.

Come ultimo risultato, puoi provare a utilizzare il pulsante "Abilita CORS" aggiunto recentemente da Amazon. Seleziona la risorsa nella visualizzazione ad albero a sinistra e cerca il pulsante "Abilita CORS" in alto a destra. Fare clic qui e AWS ricreerà tutti i metodi correlati a CORS.

Spero che alcuni di questi passaggi siano d'aiuto!

Answer 3

Api Gateway team qui.

Speriamo che ora abbiate controllato la nuova funzione "Abilita CORS" nella console. Anche se il tuo workflow di sviluppo è al di fuori della console, puoi rapidamente configurare un'API di test e osservare le configurazioni dell'intestazione che la console imposta per te, quindi copiarle nella tua versione di Swagger o in qualsiasi altra soluzione tu abbia creato.

La guida dei documenti deve essere ancora applicata in entrambi i casi. Avrete bisogno delle 3 intestazioni: Access-Control-Allow-Methods, Access-Control-Allow-Origin e Access-Control-Allow-Headers. I valori di questi dipenderanno dalla tua API.

Se desideri inviarmi la risorsa API che stai cercando di invocare, posso dare un'occhiata dalla nostra parte.