使用 AWS API Gateway 和 Lambda 代理避免 HTTP 303 重定向出现 CORS 错误答案

【问题标题】：Avoid CORS error on HTTP 303 redirect using AWS API Gateway and Lambda Proxy使用 AWS API Gateway 和 Lambda 代理避免 HTTP 303 重定向出现 CORS 错误
【发布时间】：2021-09-22 01:53:16
【问题描述】：

在 API 请求上返回 303 重定向状态时，我遇到了 CORS 错误。 API 托管在 AWS API Gateway 上，并使用 AWS Lambda 与代理响应的集成。当最终用户单击我正在部署的站点上的按钮时，将发出 API 请求。

这是 CORS 错误：

Access to XMLHttpRequest at 'https://destination.com/' (redirected from 'https://my-api-endpoint.com') from origin 'http://source.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我从 Lambda 函数返回以下代理对象：

{
    "statusCode": 303,
    "headers": {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Headers": "*",
        "Access-Control-Allow-Methods": "*",
        "Access-Control-Allow-Credentials": True,
        "Location": "https://destination.com/",
    },
}

因此，"Access-Control-Allow-Origin": "*" 作为请求中的标头丢失不是问题，这确实是我迄今为止通过谷歌搜索找到的唯一答案。

此外，如果我将 API 端点放入浏览器中，它会按预期工作。据我所知，不同之处在于，当端点直接放入浏览器时，sec-fetch-site 标头返回为none，而当我单击站点上的按钮时，标头返回为cross-site，并且这种差异导致了 CORS 错误。

我的用例是 AWS Marketplace 上的 SaaS 列表，因此当用户订阅我将列出的产品时，POST 请求会发送到我的 API 端点，其中包含我需要摄取的客户端令牌，然后从那里我需要将最终用户路由到我的登录页面。对我来说，最自然的处理方法是使用返回 303 重定向的 API 端点，但由于源是 AWS Marketplace URL，因此我自然总会遇到跨域问题。

有谁知道如何避免这个 CORS 错误？如果没有，是否有人对我应该如何处理这个问题有其他建议？

【问题讨论】：

https://destination.com/ 有 CORS 标头吗？
啊，我觉得自己像个白痴，https://destination.com/ 的来源是一个 S3 存储桶，完全忘记了我可以在那里添加 CORS 标头。谢谢！！我将在下面为以后偶然发现此问题的任何人提供一个更强大的解决方案

标签： amazon-web-services cors aws-api-gateway http-status-code-303

【解决方案1】：

结果就像经常发生的那样，答案正盯着我的脸。 https://destination.com 是我在 AWS S3 存储桶中托管的一个站点，前面有一个 CloudFront 分布。解决方案是将 CORS 配置添加到 S3 存储桶，然后在 CloudFront 中创建自定义缓存策略。然后，我编辑了 CloudFront 分配的默认行为以指定缓存策略（我刚刚创建的那个）和源策略 (CORS-S3Origin)。一旦我使分发无效，它就像一个魅力。感谢 @Evert 让我检查我认为我已经排除的内容。

【讨论】：