使用 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 Elastic beanstalk 和 S3 静态 Web 中的 CORS 策略