AWS Cloudfront 以 AWS S3 作为源时出现 CORS 错误答案

【问题标题】：AWS Cloudfront gives a CORS error with AWS S3 as originAWS Cloudfront 以 AWS S3 作为源时出现 CORS 错误
【发布时间】：2021-06-13 08:44:45
【问题描述】：

我在 S3 上托管了一个 webapp，我们使用 S3 Hosting 链接来访问该 webapp。我们在应用程序上有一个登录选项，可以从内部调用 Okta 登录链接。 S3 链接上一切正常，我已将 S3 CORS 上的 Okta 链接启用为允许的来源。我最近将 S3 Origin 添加到 Cloudfront，现在，由于 Okta 链接被 CORS 策略阻止，我无法继续登录。

详情：

整个网站按预期正常运行。
CORS 问题仅出现在 Cloudfront 链接上。使用 S3 静态链接时不会出现 CORS 错误。（因为添加了 S3 CORS 以允许 Okta 链接）
出现的错误：跨源资源共享错误：PreflightMissingAllowOriginHeader。

CORS 政策已阻止从源“https://{cloudfront_release}.cloudfront.net”访问“https://{my_okta_org}.okta.com/api/v1/authn”获取：响应预检请求未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

问题：

我必须在 Cloudfront 上添加哪些配置更改才能在 S3 上允许允许的 CORS？

参考：

其他细节：

S3 中允许使用 CORS：

    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE",
            "HEAD"
        ],
        "AllowedOrigins": [
            "https://{my_okta_url}.okta.com"
        ],
        "ExposeHeaders": []
    },

云端详情：

【问题讨论】：

stackoverflow.com/questions/50299204/… 看到这会帮助你。
嗨@aviboy2006 感谢您推荐解决方案，但问题似乎与错误处理无关。它实际上是基于 CORS 的。我无法将来源从云端转发到 S3。

标签： reactjs amazon-web-services amazon-s3 cors amazon-cloudfront

【解决方案1】：

这是 CloudFront 和 Okta 之间的问题，S3 尚未参与您的请求管道。预检问题很常见，它按设计工作，错误消息准确地告诉您需要做什么。我对 Okta 不熟悉，但看起来您可能已将其配置为接受来自 S3 的流量，您需要将其更改为接受来自 CloudFront 的流量。或者，您的 CloudFront 配置需要将“Access-Control-Allow-Origin”HTTP 标头添加到从 CloudFront 到 Okta 的请求中，并且（首选）专门列出 CloudFront 源而不是使用通配符。此标头的概述是https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin。

【讨论】：

嗨@RichDudley，感谢您的回复。但我已经尝试了一切。添加了 cloudfront 白名单的标头。好像还是不行，

【解决方案2】：

您能否确保以下各项设置正确：

在 Otka 应用程序设置中，您将 CloudFront URL 配置为允许的基本 URL 之一（参考图片）
您的 CloudFront 白名单设置看起来不错。
如果您在 Otka 中使用回调，请参考此内容 (Otka Callback LambdaEdge)

【讨论】：

嗨@dhawalmewada，谢谢。 Okta 设置看起来与我在 Okta 上的设置相似。另外，感谢您对 Lambda 解决方案的引用，但我想我正面临一个不同的问题。我的回调在 S3 上运行良好。 CORS 问题出现在从我们的应用程序启动登录时以及调用回调之前的方式，因此直到那时回调才出现。

【解决方案3】：

注意：[回答我自己的问题。]

所以，这是直接在云端发行版和 Okta 之间的问题。我在 S3 端启用了所有 CORS 策略，并在云端启用了所有转发标头的功能。我错过的是将 Cloudfront Origin 添加到 Okta 端的 CORS 策略白名单中。将 Cloudfront URL 添加到列入白名单的来源解决了该问题。

为此，我必须转到 Okta 控制台 > 安全 > API > 可信来源。在此处添加了允许访问 Okta 的 Origin 名称。

注意：其他答案更深入地了解我们可以检查哪些其他内容以使解决方案正常工作，并且应该对故障排除非常有益。

【讨论】：