从 S3 托管的网站访问 Lambda 函数时出现 CORS 错误答案

【问题标题】：CORS Error accessing Lambda function from S3-hosted website从 S3 托管的网站访问 Lambda 函数时出现 CORS 错误
【发布时间】：2021-11-23 11:49:03
【问题描述】：

这是一个重复的问题，因为它是关于我已经在许多其他 stackoverflow 帖子中读到的问题。但是，我找到的解决方案似乎都不适用于我的特定配置，这就是为什么我想再次询问我自己的详细信息。

我已经设置了一个 S3 存储桶，其中包含用于我的网站的 html/javascript。我将这个存储桶开放给所有人查看，并在其上添加了以下 CORS 策略：

[
{
    "AllowedHeaders": [
        "*"
    ],
    "AllowedMethods": [
        "GET",
        "POST",
        "OPTIONS"
    ],
    "AllowedOrigins": [
        "*"
    ],
    "ExposeHeaders": []
}
]

但是，我的服务功能的核心在于一个 Lambda 函数（它在内部与 DynamoDB 通信）。为了从我的 S3 托管网站访问这个 Lambda 函数，我还添加了一个 API 网关。

首先，我在我的 Lambda 请求处理中添加了以下内容：

const headers = {
    'Content-Type': 'application/json',
    'Access-Control-Allow-Headers': 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token',
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'OPTIONS,POST,GET',
};

标头稍后作为请求结果的一部分返回。

我的 API Gateway 很简单，只有一个 URL 组成，配置如下：

此外，我在这个 API 网关上启用了 CORS，如下所示：

当我点击“Stages”时，也会出现其他一些请求方法，但我认为它们没有启用/不重要：

因此，基本上，我在 3 个不同的点上启用了 CORS：在我的 S3 存储桶上、在我的 Lambda 代码中以及在 API 网关上。然而，当我尝试通过从存储桶上的网站向我的 API 网关发送 POST 请求来访问我的 Lambda 函数时，我收到以下错误：Access to XMLHttpRequest at 'https://----.execute-api.eu-west-3.amazonaws.com/default/----' from origin 'http://------.s3-website.eu-west-3.amazonaws.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

而且，我根本不知道如何继续。我已经阅读了 AWS 的 CORS Docs，并且我已经广泛地滚动了 Stackoverflow，但我似乎无法自己重现工作环境......

【问题讨论】：

我已经阅读或重新阅读 API 网关 CORS troubleshooting guide 和 Enabling CORS for a REST API resource。
@jarmod 我做到了，但我仍然无法弄清楚。不确定我是否遗漏了一些明显的东西或者只是愚蠢，但我想这就是我创建这篇文章的原因，因为我无法弄清楚什么是行不通的
您部署舞台了吗？
您在哪里看到 cors 错误？在开发者控制台中？如果您的函数在返回 http 响应之前出现错误，您也可能会得到一个 cors 错误 - 在您的代码周围放置一个 try/catch 块，然后在 catch 中将响应代码更改为 500，看看这是否会改变您的错误。

标签： amazon-web-services amazon-s3 aws-lambda cors

【解决方案1】：

尝试发送 CORS 标头作为 lambda 函数的响应。这可能是您收到此错误的原因。

exports.handler = async (event) => {
    const response = {
        statusCode: 200,
        headers: {
            "Access-Control-Allow-Headers" : "Content-Type",
            "Access-Control-Allow-Origin": "https://www.example.com",
            "Access-Control-Allow-Methods": "OPTIONS,POST,GET"
        },
        body: JSON.stringify('Hello from Lambda!'),
    };
    return response;
};

Refer here

【讨论】：