有人设法在响应头中添加Access-Control-Allow-Origin吗?
我需要的是这样的东西:
<img src="http://360assets.s3.amazonaws.com/tours/8b16734d-336c-48c7-95c4-3a93fa023a57/1_AU_COM_180212_Areitbahn_Hahnkoplift_Bergstation.tiles/l2_f_0101.jpg" />
这个get请求应该在响应中包含Access-Control-Allow-Origin: *
我的CORS设置桶看起来像这样:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
正如您所期望的那样,没有Origin响应头。
上面的大部分答案都没用。我试图上传图像到S3桶使用react-s3,我得到了这个
跨地域请求被阻止
错误。
您所要做的就是在s3 Bucket中添加CORS配置
进入“S3桶->权限-> CORS配置”
然后粘贴下面的内容
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
将*替换为您的网站url。
参考:AWS CORS设置
就像其他人说的,你首先需要在你的S3桶中有CORS配置:
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod> <!-- Add this -->
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>
但在我做了这些之后,它仍然不起作用。我用的是Chrome(可能其他浏览器也有同样的问题)。
问题是Chrome是缓存图像的头(不包含CORS数据),所以无论我试图改变AWS,我不会看到我的CORS头。
在清除Chrome缓存和重新加载页面后,图像有预期的CORS头
我最近遇到了同样的问题,似乎AWS对我们定义CORS配置的方式做了一些更改。例如,如果你想允许某些方法在过去的S3桶上,你必须在编辑器上做这样的事情:
下面的配置与上面的配置相同,但采用数组的形式。
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"PUT",
"POST",
"HEAD",
"DELETE"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": [],
"MaxAgeSeconds": 3000
}
]