如何在 Amazon S3 中配置 CORS 策略以从 React App 上传文档？

Posted 2023-03-04

【中文标题】如何在 Amazon S3 中配置 CORS 策略以从 React App 上传文档？

【英文标题】：How to configure the CORS policy in Amazon S3 to upload documents from React App?

【发布时间】：2021-07-11 23:55:21

【问题描述】：

我在这里发送此消息是因为我想澄清一些关于我在 AWS 上开发的后端解决方案的问题。实际上，我有 1 个问题非常希望您回答我:)

因此，我为 S3 存储桶配置了公共访问权限，以便能够从前端反应应用程序上传文件。但是，即使将 CORS 策略配置为允许所有来源，我的浏览器中也会出现 No Access-Control-Allow-Origin header is present on the requested resource 错误。 我应用于 S3 存储桶的 CORS 策略如下图所示：

我试图通过重新创建其他策略甚至重新创建另一个存储桶来解决问题......我最终放手了。

但最奇怪的是，一天后，我什么都没碰，原来的CORS错误就消失了，现在我可以正常上传S3桶里的文件了。

为什么它以前不工作，为什么它开始自己工作？

【问题讨论】：

图片丢失。

【参考方案1】：

如果一切设置正确，那么它就可以正常工作，您的问题没有完整的信息或任何线索来调查和理解问题。

参考的跨域资源共享 (CORS) 示例，仅作为最佳做法限制对您的域的权限。

[
    
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET",
            "PUT",
            "POST"
        ],
        "AllowedOrigins": [
            "https://*.cloudopz.co"
        ],
        "ExposeHeaders": [
            "ETag"
        ]
    ,
    
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET",
            "PUT",
            "POST"
        ],
        "AllowedOrigins": [
            "http://*.cloudopz.co"
        ],
        "ExposeHeaders": [
            "ETag"
        ]
    
]