使用 S3 的 React App 中的 CORS ORIGIN 错误

Posted

技术标签:

【中文标题】使用 S3 的 React App 中的 CORS ORIGIN 错误【英文标题】:CORS ORIGIN Error in React App that uses S3 【发布时间】:2021-04-05 04:47:52 【问题描述】:

我一直在做一个项目,客户应该使用 AWS 将文件上传到云存储中。 我的应用程序是用 ReactJS 编写的,我决定将文件直接从客户端上传到云存储。我已经构建了应用程序并将其部署到服务器。 (这里是链接raymon-tech.ir) 但它会返回

访问 XMLHttpRequest 在 'https://kamal-archive.s3.ir-thr-at1.arvanstorage.com/aaa.js?uploads' 来自原产地“https://raymon-tech.ir”已被 CORS 政策阻止: 对预检请求的响应未通过访问控制检查:它 没有 HTTP ok 状态。

错误。 如果我禁用浏览器的 CORS,它可以正常工作。

更新:

我使用 S3 浏览器来配置存储桶策略和 CORS 配置。 这是我的配置:

CORS 配置:

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedHeader>*</AllowedHeader>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <ExposeHeader>ETag</ExposeHeader>
    <ExposeHeader>Accept-Ranges</ExposeHeader>
    <ExposeHeader>Content-Encoding</ExposeHeader>
    <ExposeHeader>Content-Length</ExposeHeader>
    <ExposeHeader>Content-Range</ExposeHeader>
  </CORSRule>
</CORSConfiguration>

和 存储桶策略:


  "Version": "2008-10-17",
  "Id": "S3PolicyId1",
  "Statement": [
    
      "Sid": "IPAllow",
      "Effect": "Allow",
      "Principal": 
        "AWS": "*"
      ,
      "Action": "s3:GetBucketCORS",
      "Resource": "arn:aws:s3:::raysa/*"
    
  ]

我最近更改了它们,但没有任何反应。

【问题讨论】:

你需要在服务器上配置 cors 访问权限 Cross-Post:在此处发布我对此的回答:***.com/questions/66370716/… 【参考方案1】:

如果您需要将文件直接从前端应用上传到 S3 存储桶,请确保将这些文件添加到存储桶的 CORS 策略中:

[
    
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "POST",
            "PUT",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "ETag",
            "Accept-Ranges",
            "Content-Encoding",
            "Content-Length ",
            "Content-Range"
        ],
        "MaxAgeSeconds": 3000
    
]

【讨论】:

这是否处理 OPTIONS 预飞行?因为有一个 OPTIONS 飞行前发生 我使用 S3 浏览器配置 CORS 配置和存储桶策略。 @AliEsmailpor 你在那里设置了 CORS 配置吗? 是的,我按照我在问题中写的那样做了。对吗? OPTIONS 不被接受为 AllowedMethods。当我尝试通过 AWS SDK JS 获取 S3 对象时,我也遇到了类似的问题。我必须将 POST 添加到 allowedMethods 以便预检请求不会给出 CORS 错误。

以上是关于使用 S3 的 React App 中的 CORS ORIGIN 错误的主要内容,如果未能解决你的问题,请参考以下文章

AWS 弹性豆茎上的 CORS

AWS Elastic beanstalk 和 S3 静态 Web 中的 CORS 策略

S3 被 CORS 策略阻止

被 CORS 策略阻止的 React-S3

使用 create-react-app 和 webpack 发出 CORS API 请求 - 不明确

Cloudfront 分发中 S3 中的 React App 将 HTTPS 请求转换为 HTTP