[英]Cross-origin requests AJAX requests to AWS S3 sometimes result in CORS error
[英]CORS ORIGIN Error in React App that uses S3
我一直在做一个项目,客户应该使用 AWS 将文件上传到云存储中。 我的应用程序是用 ReactJS 编写的,我决定将文件直接从客户端上传到云存储。 我已经构建了应用程序并将其部署到服务器。 (这里是链接raymon-tech.ir )但它返回
CORS 策略已阻止从源“https://raymon-tech.ir”访问“https://kamal-archive.s3.ir-thr-at1.arvanstorage.com/aaa.js?uploads”上的 XMLHttpRequest :对预检请求的响应未通过访问控制检查:它没有 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/*"
}
]
}
我最近改变了它们,但什么也没发生。
如果您需要将文件直接从前端应用程序上传到 S3 存储桶,请确保将这些文件添加到存储桶的 CORS 策略:
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"POST",
"PUT",
"HEAD"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": [
"ETag",
"Accept-Ranges",
"Content-Encoding",
"Content-Length ",
"Content-Range"
],
"MaxAgeSeconds": 3000
}
]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.