AWS S3 存储桶 CORS 策略错误:请求的资源上不存在“Access-Control-Allow-Origin”标头
Posted
技术标签:
【中文标题】AWS S3 存储桶 CORS 策略错误:请求的资源上不存在“Access-Control-Allow-Origin”标头【英文标题】:AWS S3 Bucket CORS Policy Error: No 'Access-Control-Allow-Origin' header is present on the requested resource 【发布时间】:2020-12-19 23:55:26 【问题描述】: 我是无服务器服务的新手,主要是 aws 概念。我正在尝试使用 AWS S3 Bucket 和 CloudFront 部署我的单页应用程序 (SPA)。每个静态文件都得到了正确的服务,但是在 SPA 中,有一些 axios.POST(...) 来自我的 API 的原始页面。 Api 已正确配置,并接受来自任何人(经过测试)的请求。 现在当我尝试时: curl -H "origin: ORIGIN_DOMAIN" -H "x-api-key: API_KEY" -v "API_URL"
响应与预期一致(数据为 200 OK)
但是当我尝试加载我的 SPA 时,浏览器显示:
CORS 已阻止从源“http://d1b89hgibifv2r.cloudfront.net”访问“https://47zb0mpexk.execute-api.eu-south-1.amazonaws.com/default/autostatistika”处的 XMLHttpRequest政策:对预检请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头。
我的 S3 存储桶 CORS 政策:
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
我发现了一些 *** 问题,例如:Correct S3 + Cloudfront CORS Configuration? 并做了答案(以及 aws 文档):https://***.com/a/52383335/9156446
请,有人可以帮我解决这个问题吗?谢谢。
更新: 我忘记在本地机器上尝试使用远程 API 设置的 SPA,我的应用程序无法运行,即使在本地机器上也是如此。几个小时后,我发现我的 API 仅在带有 axios.POST() 的浏览器中没有响应标题“Access-Control-Allow-Origin”:“*”。所以问题出在 API 中,因为即使 cURL 命令有效,它也没有正确响应标头“Access-Control-Allow-Origin”(AWS Lambda + API Gateway)。我通过在 AWS Lambda 的响应中对标头进行硬编码来解决它。 感谢@vaquar khan,感谢您的时间。
【问题讨论】:
-aws.amazon.com/premiumsupport/knowledge-center/… 是的,我已经阅读并完成了所有操作。 你能在没有云端的情况下访问你的应用吗? 是的,我是,但同样的错误。 那么你的 S3 配置有问题 【参考方案1】:您需要更改配置以允许使用 ACL 进行公共访问并添加以下配置
cors 配置:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>http://www.myapp.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<ExposeHeader>Accept-Ranges</ExposeHeader>
<ExposeHeader>Content-Range</ExposeHeader>
<ExposeHeader>Content-Encoding</ExposeHeader>
<ExposeHeader>Content-Length</ExposeHeader>
<ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
<AllowedOrigin>https://www.app.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<ExposeHeader>Accept-Ranges</ExposeHeader>
<ExposeHeader>Content-Range</ExposeHeader>
<ExposeHeader>Content-Encoding</ExposeHeader>
<ExposeHeader>Content-Length</ExposeHeader>
<ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
s3-web-policy:
"Version":"2012-10-17",
"Statement":[
"Sid":"AddPerm",
"Effect":"Allow",
"Principal": "*",
"Action":["s3:GetObject"],
"Resource":["arn:aws:s3:::dynamic-xxx-xxx-bucket/*"]
]
【讨论】:
感谢您的回复。我已经尝试了您的解决方案,但仍然遇到相同的错误。看起来没有任何变化。 也许还有一件事,如果你能花一分钟。我的 API 具有通用访问密钥(需要 x-api-key 标头),我使用 axios.POST(url, params, headers) 发送。但是正如你提到的:“*”,所以这应该不是问题吗?以上是关于AWS S3 存储桶 CORS 策略错误:请求的资源上不存在“Access-Control-Allow-Origin”标头的主要内容,如果未能解决你的问题,请参考以下文章
如何获取 Rails 应用程序的 CORS 标头以访问 aws s3 存储桶?
从浏览器缓存提供图像时,AWS S3 + CloudFront 会出现 CORS 错误