使用S3的React App中的CORS ORIGIN错误 [英] CORS ORIGIN Error in React App that uses S3

问题描述

我一直在研究一个项目，即客户端应使用AWS将文件上传到Cloud Storage.我的应用是用ReactJS编写的，因此我决定直接从客户端将文件上传到Cloud Storage.我已经构建了应用程序并将其部署到服务器.(这是链接 raymon-tech.ir )但它返回

I've been working on a project that client should upload a file into a Cloud Storage with AWS. My app was written with ReactJS and I decided to upload the file directly from client side to Cloud Storage. I've built the app and deployed it to server. (Here is the link raymon-tech.ir) But It returns

在以下位置访问XMLHttpRequest'https://kamal-archive.s3.ir-thr-at1.arvanstorage.com/aaa.js?uploads'CORS政策已阻止来自来源"https://raymon-tech.ir"的邮件:对预检请求的响应未通过访问控制检查:没有HTTP正常状态.

Access to XMLHttpRequest at 'https://kamal-archive.s3.ir-thr-at1.arvanstorage.com/aaa.js?uploads' from origin 'https://raymon-tech.ir' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

错误.如果禁用浏览器的CORS，则可以正常工作.

error. If I disable CORS of my browser, it works fine.

更新:

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

I use S3 Browser for config the Bucket Policy and CORS Configuration. Here's my configs:

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/*"
    }
  ]
}

我最近更改了它们，但什么也没发生.

I changed them recently but nothing happend.

推荐答案

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

If you need to upload files directly from your front-end app to S3 bucket, please make sure you add those to the bucket's CORS policy:

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

这篇关于使用S3的React App中的CORS ORIGIN错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！