web-dev-qa-db-fra.com

AWS API Gateway Aucun en-tête 'Access-Control-Allow-Origin' n'est présent.

Je suis coincé sur un problème avec la passerelle API et j'ai parcouru toutes les autres SO réponses à ce sujet, sur les forums AWS, et j'ai parcouru leur documentation, mais toujours pas de joie.

J'essaie de configurer une API à l'aide de la passerelle API AWS qui appelle une fonction Lambda qui lit/écrit dans une table dans DynamoDB.

La fonction Lambda à DynamoDB fonctionne. J'ai créé une API dans AWS et créé les méthodes GET et OPTIONS correspondantes. J'ai lu que AWS n'appliquait pas les options pour seulement GET/POST mais que je recevais une erreur de contrôle en amont dans mon appel ajax alors qu'il n'y avait pas de méthode OPTIONS, j'ai donc ajouté une.

Pour l'instant, pour progresser, je n'utilise ni clé d'API ni autorisation .. Je peux appeler avec succès ma méthode GET à l'aide de POSTMAN, qui renvoie le contenu de la table DynamoDB.

Mais quand j'essaie d'utiliser un appel JQuery ajax, je reçois

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Je peux voir, à l’aide des outils de développement de Chrome, sous l’onglet Réseau, la méthode OPTIONS renvoyer l’état 200 et l’objet GET renvoyer l’état 200, mais avec l’erreur susmentionnée.

J'ai essayé d'activer CORS à la fois sur les méthodes OPTIONS et GET, j'ai redéployé l'API après chaque modification, essayé ce qui suit ( http://enable-cors.org/server_awsapigateway.html ) mais je reçois toujours le même erreur dans la console.

J'exécute l'appel ajax à partir d'un fichier sur mon bureau afin que Origin soit défini sur null, car la page sera déployée sur S3 en tant qu'application de page Web unique dans JS.

Lorsque j'ai activé CORS sur mes options GET et OPTIONS, je peux voir que Access-Control-Allow-Headers est 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token' et Access-Control-Allow-Origin * est '*'.

Mon appel Ajax ressemble à celui ci-dessous. J'ai également essayé de copier les en-têtes exacts utilisés par POSTMAN, qui contient l'en-tête Authorization (que j'ai désactivé dans AWS pour l'instant), mais j'obtiens toujours la même erreur ci-dessus. 

var awsHeaders = {};
awsHeaders['X-Amz-Date'] = '20161127T171734';

$('#add, #cloud').click(function() {

    $.ajax({

        type: 'GET',
        headers: awsHeaders,
        dataType : "json",
        url: '...',
        success: function (res) {

            console.log('response in GET:');
            console.log(res);

        },
        error: function(data) {
            console.log('in error');
            console.log(data);
        }

    });

});

Quelqu'un peut-il nous éclairer sur ce qui pourrait me manquer?

Merci beaucoup

Update Voir la réponse ci-dessous concernant la façon dont j'ai résolu ce problème, conformément aux commentaires de DigitalKapteain - en définissant l'en-tête 'Access-Control-Allow-Origin': '*' dans la réponse de ma fonction Lambda. J'ai cherché cela dans la documentation AWS, mais je n'ai pas pu le trouver. Ce lien décrit la différence entre les mandataires Lambda et Lambda et explique ce qu’il faut faire lors de l’utilisation de CORS https://serverless.com/framework/docs/providers/aws/events/apigateway/

jqueryajaxamazon-web-servicesaws-lambdaaws-api-gateway
21
user12345

La réponse de la demande GET à la fonction Lambda doit également contenir le Access-Control-Allow-Originheader.

43
Digitalkapitaen

La réponse de Digitalkapitaen est correcte. voici le code pour éviter à quelqu'un le problème de la recherche comment définir un en-tête de réponse HTTP dans Lambda :

exports.handler = function(event, context, callback) {
    callback(null, {
        "statusCode": 200,
        "headers": { 
            "Access-Control-Allow-Origin": "*" 
        }
    });
};
21
Words Like Jared

Si cela ne fonctionne toujours pas pour vous, assurez-vous de JSON.stringify () votre objet JSON si vous utilisez $ .ajax. Sinon, vous recevrez quand même une erreur qui prétend être une erreur liée à CORS. Mais si vous envoyez le même objet Json à l'aide de Postman, la requête aboutira. Essaye le...

5
rickfarina

Pour ceux qui souhaitent intégrer la solution de @ Digitalkapitaen dans Flask, voici le code ci-dessous:

app = Flask(__name__)
cors = CORS(app, resources={r"/*": {"origins": "*"}})

@app.route("/")
def helloWorld():
  return "Hello, cross-Origin-world!"

Installez le module flask-cors en effectuant les opérations suivantes:

pip install -U flask-cors
0
captainblack