web-dev-qa-db-fra.com

L'accès à l'extraction sur $ AWS_LAMBDA_SITE à partir de l'origine 'http: // localhost: 3000' a été bloqué par la stratégie CORS

Utilisation d'ExpressJs et de ClaudiaJs, j'ai publié un serveur Web sur AWS Lambda. Le travail de ce serveur consiste à traiter les paiements Stripe. J'essaie de faire en sorte que mon SPA React envoie la commande de stripe du client, mais je reçois une erreur CORS lorsque j'essaie de le soumettre. 

Comment puis-je éviter cette erreur CORS? J'imagine que j'ai besoin de publier le client et le serveur AWS sur le même TLD (je ne sais pas comment faire pour que cela fonctionne), ou je devrais désactiver CORS sur le serveur (mais cela ne semble pas sûr).

Appel de serveur de bande:

    this.handler = StripeCheckout.configure({
        key: test_key,
        locale: "auto",
        mode: "no-cors",
        name: "Company 1234",
        description: "donation",
        token: token => {
            // Send the donation to your server
            console.log("server pinged");

            fetch(`${backendUrl}/charge`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    stripeToken: token,
                    chargeAmount: this.state.donationAmount
                })
            })
                .then(res => res.json())
                .then(json => {
                    console.log("response is " + json);
                    this.setState({ donationResponse: "Thank you for donating!" });
                })
                .catch(error => {
                    this.setState({
                        donationResponse:
                            "There was an issue processing your request. Please try again later"
                    });
                });
        }
    });

Soumission de formulaire

formSubmit = async event => {
    console.log("form submitted");
    event.preventDefault();

    const amount = this.state.donationAmount * 100; // Needs to be an integer in cents
    this.handler.open({
        amount: Math.round(amount)
    });
};
amazon-web-servicescorsaws-lambdasingle-page-application
1
James L.

Vous pouvez transmettre l'en-tête Origin à la demande de votre application locale. Et en réponse à AWS lambda, vous pouvez ajouter les en-têtes de réponse ci-dessous:

headers :{
    "access-control-allow-Origin": "localhost",
    "access-control-allow-credentials": "true"
}

Dans les variables d'environnement lambda, vous pouvez configurer la liste des origines autorisées, séparées par une virgule (,), afin de garantir que seuls les domaines légitimes obtiennent un accès. quelque chose comme ci-dessous:

 "localhost, yourdomain.com"

Le problème CORS concerne en réalité la demande de blocage du navigateur pour un autre domaine, ce qui peut être résolu en ajoutant les en-têtes ci-dessus.

J'ai également fait face à un problème similaire, où nous avions une demande acheminée via apigateway - lambda.

2
Sangam Belose