webentwicklung-frage-antwort-db.com.de

Der Zugriff auf das Abrufen von $ AWS_LAMBDA_SITE von Origin 'http: // localhost: 3000' wurde durch die CORS-Richtlinie blockiert

Mit ExpressJs und ClaudiaJs habe ich einen Webserver für AWS Lambda veröffentlicht. Die Aufgabe dieses Servers ist die Verarbeitung von Stripe-Zahlungen. Ich versuche, mein React SPA zu veranlassen, die Stripe-Prüfung vom Client abzusenden, erhalte jedoch einen CORS-Fehler, wenn ich versuche, die Prüfung abzusenden.

Wie kann ich diesen CORS-Fehler vermeiden? Ich würde mir vorstellen, dass ich entweder sowohl den Client als auch den AWS-Server auf derselben TLD veröffentlichen muss (nicht sicher, wie das funktioniert) oder CORS auf dem Server deaktivieren muss (aber das scheint unsicher zu sein).

Stripe-Server-Aufruf:

    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"
                    });
                });
        }
    });

Formular einreichen

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)
    });
};
1
James L.

Sie können Origin-Header auf Anforderung von Ihrer lokalen App übergeben. Und als Antwort von AWS Lambda können Sie folgende Antwort-Header hinzufügen:

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

In Lambda-Umgebungsvariablen können Sie eine durch Komma (,) getrennte Liste der zulässigen Herkunft konfigurieren, um sicherzustellen, dass nur legitime Domänen Zugriff erhalten. so etwas wie unten:

 "localhost, yourdomain.com"

Bei dem CORS-Problem handelt es sich in Wirklichkeit um eine Browser-Blockierungsanforderung für eine andere Domain, die durch Hinzufügen der obigen Header behoben werden kann.

Ich habe auch mit einem ähnlichen Problem zu tun gehabt, bei dem wir eine Anfrage über eine Autobahn geschickt hatten - Lambda.

2
Sangam Belose