如何在AWS中API网关和React应用程序之间启用CORS策略？

Question

我想通过AWS上的lambda函数发送电子邮件。我还使用了API网关。我在那里启用 cors 并使用 lambda 函数和 React 应用程序发送标头。

Lambda 函数

var response = {
        statusCode: 200,
        headers: {
            'Access-Control-Expose-Headers': 'Access-Control-Allow-Origin',
            'Access-Control-Allow-Credentials': true,
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': '*',
        }
   };

我的反应应用程序

const awsEndpoint = 'myawsendpoint.amazonaws.com'
axios.post(awsEndpoint, {
 headers: {
    'Access-Control-Expose-Headers': 'Access-Control-Allow-Origin',
    'Access-Control-Allow-Credentials': true,
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*',
 },
 formEmail,
 formSubject,
 formMessage

})

在控制台中我收到以下错误 chrome 控制台错误

Answer 1

要解决此问题，您需要在 AWS API Gateway 控制台中更新 CORS 策略（针对每个路由、GET、DELETE、OPTIONS 等）。我会阅读这篇很棒的 Medium 文章，其中有屏幕截图和 cors 的详细解释

解决方案：https://codeburst.io/react-js-api-calls-to-aws-lambda-api-gateway-and-dealing-with-cors-89fb897eb04d

Answer 2

我最终创建了一个小型 lambda 函数并将其集成到“/{proxy+}”路径处的 OPTIONS 方法。以下说明，祝你好运！

1. 创建简单的 lambda 函数，为 OPTIONS 方法请求返回 200。我这样做时应用了具有 CORS 问题的 lambda 函数的相同角色。 AWS 代码示例此处

我使用了 python hello-world 模板并将其放入：

import json

def lambda_handler(event, context):
    return {
        'statusCode': 200,
        'headers': {
            'Access-Control-Allow-Headers': 'Content-Type',
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'OPTIONS,POST,GET'
        },
        'body': json.dumps('Hello from Lambda!')
    }

2. 在 api 网关中为“/{proxy+}”路径创建 OPTIONS 方法

3. 在左侧窗格中选择集成，然后附加新的简单 200 响应 lambda 函数作为 OPTIONS 方法的集成

这让我开始跑步。我认为一旦你知道它起作用了，你就可以收紧限制。下面是我最初运行 CORS 设置时的屏幕截图：

希望对您有帮助！

Answer 3

您是否尝试过在 package.json 中设置代理？这将允许您从本地主机访问您的 AWS 网关。

在你的

package.json

    ...
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "proxy": "myawsendpoint.amazonaws.com",
    ....

然后你可以使用部分路径来访问你的资源

fetch("/your-resource", options)

Answer 4

在发布方法的方法响应中添加“Access-Control-Allow-Origin”标头就足够了