Доступ к выборке в $ AWS_LAMBDA_SITE из источника 'http://localhost:3000' был заблокирован политикой CORS

Question

Используя ExpressJ и ClaudiaJ, я опубликовал веб-сервер для AWS Lambda.Работа этого сервера заключается в обработке платежей Stripe.Я пытаюсь получить React SPA для отправки проверки Stripe от клиента, но при попытке отправки я получаю сообщение об ошибке CORS.

Как можно избежать этой ошибки CORS?Я бы подумал, что мне нужно либо опубликовать и клиент, и сервер AWS на одном TLD (не знаю, как это сделать), или мне нужно отключить CORS на сервере (но это кажется небезопасным).

Stripe серверный вызов:

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

Форма отправки

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

Answer 1

Вы можете передать заголовок источника в запросе из вашего локального приложения. И в ответ от AWS лямбда вы можете добавить ниже заголовки ответа:

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

В лямбда-переменных среды вы можете настроить список разрешенных источников, разделенных запятой (,), чтобы гарантировать, что только законный домен получает доступ. что-то вроде ниже:

 "localhost, yourdomain.com"

Проблема CORS действительно связана с запросом блокировки браузера другим доменом, который можно решить, добавив вышеуказанные заголовки.

Я также столкнулся с подобной проблемой, когда у нас был запрос, направленный через apigateway - lambda.