S3 - Access-Control-Allow-Origin头

有人设法在响应头中添加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响应头。

当前回答

见以上答案。(但我也有一个chrome bug)

不要在CHROME中加载和显示图片。(如果稍后要创建一个新实例)

在我的例子中，我加载图像并在页面上显示它们。当它们被点击时，我创建了它们的一个新实例:

// there is already an html <img /> on the page, I'm creating a new one now
img = $('<img crossorigin />')[0]
img.onload = function(){
  context.drawImage(img, 0, 0)
  context.getImageData(0,0,w,h)
}
img.src = 'http://s3.amazonaws.com/my/image.png'; // I added arbitrary ?crossorigin to change the URL of this to fix it

Chrome已经缓存了另一个版本，从来没有试图重新获取交叉来源版本(即使我在显示的图像上使用交叉来源)。

为了解决这个问题，我添加了?crossorigin到图像url的末尾(但你可以添加?blah，这只是随意改变缓存状态)，当我为画布加载它。让我知道，如果你找到一个更好的修复CHROME

2015-11-05 04:01:46

其他回答

公认的答案是可行的，但如果直接访问资源，似乎就不存在跨源头。如果您正在使用cloudfront，这将导致cloudfront缓存没有标头的版本。当你转到一个不同的url来加载这个资源时，你会遇到这个跨源问题。

2019-03-12 14:36:49

Set CORS configuration in Permissions settings for you S3 bucket <?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>Authorization</AllowedHeader> </CORSRule> </CORSConfiguration> S3 adds CORS headers only when http request has the Origin header. CloudFront does not forward Origin header by default You need to whitelist Origin header in Behavior settings for your CloudFront Distribution.

2017-06-26 16:27:17

我尝试了很多方法来解决这个问题，但最后，我还是这么做了

url.replace(/^https:\/\//i, "http://");

我不知道为什么，但这对我很有效。如果您从s3存储桶中获取图像为“BLOB”，请执行此操作。

2022-09-22 09:28:00

警告-黑客攻击。

如果您使用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问题现已解决。多么痛苦啊!

2019-06-26 00:21:46

上面的大部分答案都没用。我试图上传图像到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设置

2020-08-03 12:40:13

S3 - Access-Control-Allow-Origin头

推荐文章

最新文章

标签