Reactjs AWS Cloudfront给出了以AWS S3为原点的CORS错误

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

详情：

整个站点按预期正常工作

CORS问题只在Cloudfront链接上出现。使用S3静态链接时不会出现CORS错误。（由于添加了S3 COR以允许Okta链接）

出现错误：跨源资源共享错误：PreflightMissingAllowOriginHeader

从源站https://{cloudfront_release}.cloudfront.net'获取https://{my_okta_org}.okta.com/api/v1/authn'的访问已被CORS策略阻止：对飞行前请求的响应未通过访问控制检查：请求的资源上不存在“访问控制允许源站”标头。如果不透明响应满足您的需要，请将请求的模式设置为“no cors”，以获取禁用cors的资源

问题:

为了允许S3上允许的COR，我必须在Cloudfront上添加哪些配置更改

参考：

其他详情：

S3中允许的COR：

{
“允许的标题”：[
"*"
],
“允许的方法”：[
“得到”，
“放”，
“职位”，
“删除”，
“头”
],
“允许的来源”：[
“https://{my_okta_url}.okta.com”
],
“曝光者”：[]
}，

这是CloudFront和Okta之间的问题，您的请求管道中尚未涉及S3。飞行前的问题很常见，它正在按设计工作，错误信息会准确地告诉您需要做什么。我不熟悉Okta，但看起来您可能已经将其配置为接受来自S3的流量，您需要将其更改为接受来自CloudFront的流量。或者，您的CloudFront配置需要将“Access Control Allow Origin”HTTP头添加到从CloudFront到Okta的请求中，并且（首选）专门列出CloudFront源，而不是使用通配符。此标题的概述如下。

请确保以下内容设置正确：

在Otka应用程序设置中，您将CloudFront URL配置为允许的基本URL之一（参见图）

您的CloudFront白名单设置似乎很好

如果在Otka（）中使用回调，请参阅此

---

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

因此，这是cloudfront发行版和Okta之间的直接问题。我已经在S3端启用了所有CORS策略，并在cloudfront上转发了头文件。我错过的是将Cloudfront源添加到Okta端的CORS策略白名单中。 将Cloudfront URL添加到白名单中解决了这个问题

要做到这一点，我必须进入Okta控制台>安全>API>可信来源。在此处添加允许访问Okta的源名称

---

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

请看这将对您有所帮助。您好@aviboy2006感谢您推荐该解决方案，但问题似乎与错误处理无关。它实际上是基于CORS的。我无法从cloudfront将源代码转发到S3。您好@RichDudley，谢谢您的回复。但我什么都试过了。在cloudfront的白名单上添加了标题。还是不起作用，嗨@dhawalmewada，谢谢。Okta设置看起来与我在Okta上的设置相似。另外，感谢您提到Lambda解决方案，但我想我面临的是另一个问题。我的回调在S3上运行良好。在调用回调之前，当从我们的应用程序和路径启动登录时，会出现CORS问题，因此回调在此之前不会出现。