AWS Cloudfront 以 AWS S3 作为来源给出 CORS 错误

Question

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

详情：

整个站点按预期正常运行。
CORS 问题只出现在云端 link。使用 S3 静态 link 时不会出现 CORS 错误。（因为添加了 S3 CORS 以允许 Okta links ）
出现错误：跨源资源共享错误：PreflightMissingAllowOriginHeader。

Access to fetch at 'https://{my_okta_org}.okta.com/api/v1/authn' from origin 'https://{cloudfront_release}.cloudfront.net' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

问题：

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

参考：

Ref-01
Ref - 02

其他详细信息：

S3 中允许的 CORS：

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

Cloudfront 详细信息：

Answer 1

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

Answer 2

能否请您确保以下内容设置正确：

在 Otka 应用程序设置中，您将 CloudFront URL 配置为允许的 Base URL 之一（参考图片）
您的 CloudFront 白名单设置似乎没问题。
如果您在 Otka 中使用回调 (Otka Callback LambdaEdge)，请参考此内容

Answer 3

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

所以，这是云端分发和 Okta 之间的直接问题。我在我们的 S3 端启用了所有 CORS 策略，并在云端转发了所有内容。我错过的是将 Cloudfront Origin 添加到 Okta 端的 CORS 策略白名单中。将 Cloudfront URL 添加到白名单来源解决了这个问题。

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

注意：其他答案更深入地了解我们还可以检查什么以使解决方案有效，并且应该对故障排除非常有益。

AWS Cloudfront 以 AWS S3 作为来源给出 CORS 错误

AWS Cloudfront gives a CORS error with AWS S3 as origin

reactjs

amazon-web-services

amazon-s3

cors

amazon-cloudfront