有人设法在响应头中添加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响应头。
警告-黑客攻击。
如果您使用S3Image来显示图像，然后尝试通过获取获取图像，可能是将其插入到PDF中或进行其他处理，请注意Chrome将缓存不需要CORS preflight请求的第一个结果，然后尝试在没有preflight OPTIONS请求的情况下获取相同的资源，由于浏览器的限制将失败。
解决这个问题的另一种方法是确保S3Image包含如上所述的交叉来源:“use-credentials”。在您使用S3Image的文件中(我有一个创建S3Image缓存版本的组件，因此这是我的最佳位置)，重写S3Image的原型imageEl方法，以强制它包含此属性。
S3Image.prototype.imageEl = function (src, theme) {
if (!src) {
return null;
}
var selected = this.props.selected;
var containerStyle = { position: 'relative' };
return (React.createElement("div", { style: containerStyle, onClick: this.handleClick },
React.createElement("img", { crossOrigin: 'use-credentials', style: theme.photoImg, src: src, onLoad: this.handleOnLoad, onError: this.handleOnError}),
React.createElement("div", { style: selected ? theme.overlaySelected : theme.overlay })));
};
403问题现已解决。多么痛苦啊!
我想到了这个问题，上面的解决方案都不适用于我的情况。结果是，我只需要从我的桶的CORS配置中的<AllowedOrigin> URL中删除一个拖尾斜杠。
失败:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>http://www.mywebsite.com/</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
成功:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>http://www.mywebsite.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
我希望这能帮你省下不少麻烦。
就像其他人说的，你首先需要在你的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头
