CORS策略阻止了从源http://localhost:3000‘获取$AWS_LAMBDA_SITE的访问

Question

使用ExpressJs和ClaudiaJs，我已经向AWS发布了一个web服务器。此服务器的工作是处理Stripe付款。我试图让我的反应SPA提交Stripe结帐从客户端，但收到一个CORS错误时，我试图提交。

如何避免这个CORS错误？我想，我需要在同一个TLD上同时发布客户机和AWS服务器(不知道如何使其工作)，或者需要禁用服务器上的CORS (但这似乎不安全)。

条形服务器调用：

    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 lambda的响应，您可以添加以下响应头：

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

在lambda环境变量中，可以配置由逗号(，)分隔的允许来源列表，以确保只有合法域才能获得访问。如下所示：

 "localhost, yourdomain.com"

CORS问题实际上是关于浏览器阻塞其他域的请求，可以通过添加上面的标头来解决。

我也遇到过类似的问题，我们的要求是通过山道-兰巴。