API Gateway, bloquée par la stratégie CORS: aucun en-tête «Access-Control-Allow-Origin»
Je sais que cette question pourrait être dupliquée, mais aucune des questions existantes ne pointe vers quoi que ce soit que je ne fais pas ...
J'ai déployé une API utilisant le framework sans serveur, mais j'ai des problèmes avec CORS.
Je fais une requête get en utilisant axios:
axios.get('https://test.execute-api.us-west-1.amazonaws.com/dev/test?from=2012-01-09T21:40:00Z')
.then(response => {
this.data = response.data;
})
.catch(error => console.log(error))
Et je reçois l'erreur suivante:
Access to XMLHttpRequest at 'https://test.execute-api.us-west-1.amazonaws.com/dev/test?from=2012-01-09T21:40:00Z' from Origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Ce que j'ai déjà fait:
- Assurez-vous qu'il existe une méthode OPTIONS dans API Gateway avec une réponse de méthode qui ressemble à ceci:
- Je me suis assuré d'avoir déployé ces changements.
De plus, la réponse de ma fonction Lambda renvoie les en-têtes suivants:
return events.APIGatewayProxyResponse{
StatusCode: http.StatusOK,
Headers: map[string]string{
"Access-Control-Allow-Origin": "http://localhost:8080",
"Access-Control-Allow-Credentials": "true",
},
Body: string(jsonEvents),
}, nil
J'ai également essayé de définir Access-Control-Allow-Origin à '*'
Mon fichier serverless.yml a cors: true sur chacun des événements de fonction:
functions:
deploymentFrequency:
handler: bin/update/deployment-frequency
events:
- http:
path: deployment-frequency
method: post
cors: true
fetchDeploymentFrequency:
handler: bin/fetch/deployment-frequency
events:
- http:
path: deployment-frequency
method: get
cors: true
Qu'est-ce que je rate? Rien ne semble fonctionner. La demande fonctionne correctement de Postman et il semble inclure les en-têtes, donc cela semble être un problème avec la méthode OPTIONS.
Ma configuration est:
(event, context, callback) => {
callback(null, {
statusCode: (code || 200),
body: JSON.stringify(resp),
headers: { 'Access-Control-Allow-Origin': '*'},
});
}
et ça marche bien pour moi. J'utilise pour avoir le même problème que vous auparavant, mais tant que vous définissez votre fonction avec CORS: true et que votre réponse contient l'en-tête, ça devrait aller.
Remarque: Im ne comprenait pas la sintax "map [string] string" et les informations d'identification ne devraient pas être nécessaires dans ce cas.
Il s'avère que j'ignorais le code d'état de la réponse :(
J'ai réalisé que j'obtenais en fait deux erreurs:
- Un code d'état 406 pour un en-tête Content-Type manquant
- L'erreur CORS
La première erreur a été causée parce que je ne transmettais pas l'en-tête Content-Type à la demande (j'ai eu une vérification dans mon code, j'oublie complètement qui attend cet en-tête).
La deuxième erreur est due au fait que je n'ai pas ajouté le Access-Control-Allow-Origin en-tête de la réponse d'erreur de ma fonction.
Activer l'intégration du proxy Lamba
return events.APIGatewayProxyResponse{
StatusCode: http.StatusOK,
Headers: map[string]string{
"Access-Control-Allow-Origin": "*",
"Content-Type": "application/json",
},
Body: string(jsonEvents),
}, nil
