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

如果您的请求没有指定Origin头，S3将不会在响应中包含CORS头。这真的把我扔了，因为我一直试图卷曲文件来测试CORS，但卷曲不包括起源。

我也有类似的问题，从S3加载3D模型到javascript 3D查看器(3D HOP)，但奇怪的是，只有特定的文件类型(.nxs)。

为我修复它的是在CORS配置中将AllowedHeader从默认授权更改为*:

<?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>

见以上答案。(但我也有一个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

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.

如果你的CORS设置不起作用。

检查S3配置是否正确。我在Storage.configure中有一个无效的桶名。我使用了桶的短名称，它导致了一个错误:

被请求对象上没有'Access-Control-Allow-Origin'报头 资源。