使用 AWS API 网关和 Lambda 代理避免 HTTP 303 重定向上的 CORS 错误

Question

在 API 请求返回 303 重定向状态时，我运行遇到 CORS 错误。 API 托管在 AWS API 网关上，并使用带有代理响应的 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 函数返回以下代理 object：

{
    "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": "*" 作为 header 的问题，这实际上是迄今为止我通过谷歌搜索找到的唯一答案。

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

我这里的用例是 AWS Marketplace 上的 SaaS 列表，因此当用户订阅我将列出的产品时，POST 请求会发送到我的 API 端点我需要摄取客户端令牌，然后我需要从那里将最终用户路由到我的登录页面。对我来说，最自然的处理方法是 API 端点 returns 303 重定向，但自然地我总是运行进入 cross-origin 问题，因为来源是AWS 市场 URL.

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

Answer 1

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

使用 AWS API 网关和 Lambda 代理避免 HTTP 303 重定向上的 CORS 错误

Avoid CORS error on HTTP 303 redirect using AWS API Gateway and Lambda Proxy

amazon-web-services

cors

http-status-code-303

aws-api-gateway