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响应头。

318332 次浏览
小开
我在加载web字体时遇到了类似的问题，当我点击“添加CORS配置”时，在桶属性中，这段代码已经存在了: 

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

我只是点击保存，它工作了一个治疗，我的自定义网页字体加载在IE &Firefox。我不是这方面的专家，我只是觉得这个也许能帮到你。

小开
最佳答案
通常，你所需要做的就是在你的桶属性中添加CORS配置。

amazon-screen-shot

<CORSConfiguration>带有一些默认值。我只需要这些就能解决你的问题。只需点击“保存”，再试一次，看看它是否工作。如果它没有，你也可以尝试下面的代码(来自alxrb答案)，这似乎对大多数人都有效。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

欲了解更多信息，你可以阅读这篇关于编辑桶权限的文章。

小开

fwuensche“答案”是正确的设置CDN;这样做，我删除了maxagesecseconds。

<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
小开

如果你的请求没有指定Origin头，S3不会在响应中包含CORS头。这真的把我扔了，因为我一直试图卷曲文件来测试CORS，但卷曲不包括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版本(即使我在显示的图像上使用crossorigin。

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

小开

这是一种简单的工作方法。

我知道这是一个老问题，但仍然很难找到解决办法。

首先，我用Rails 4、Paperclip 4、CamanJS、Heroku和AWS S3构建了一个项目。

你必须使用crossorigin: "anonymous"参数来请求你的图像。

    <img href="your-remote-image.jpg" crossorigin="anonymous">

将您的站点URL添加到AWS S3中的CORS。在这里是来自Amazon的一个参考。基本上，只要转到你的存储桶，然后选择“__abc1”;在右边的选项卡中，打开“权限”选项卡，然后点击“__abc3”。

最初，我将< AllowedOrigin>设置为*。只需将星号更改为您的URL，确保在单独的行中包括http://和https://等选项。我原以为星号可以接受“全部”，但显然我们必须更具体一些。

对我来说是这样的。

enter image description here

小开

我尝试了上面所有的答案，没有一个工作。实际上，我们需要从上述答案中总结出3个步骤来实现它:

  1. 正如Flavio所建议的;在桶上添加CORS配置:

    <CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>

  2. On the image; mention crossorigin:

    <img href="abc.jpg" crossorigin="anonymous">

  3. Are you using a CDN? If everything works fine connecting to origin server but NOT via CDN; it means you need some setting on your CDN like accept CORS headers. Exact setting depends on which CDN you are using.

小开

我想到了这个问题，上面的解决方案都不适用于我的情况。结果是，我只需要从<AllowedOrigin> URL中删除后面的斜杠在我的桶的CORS配置中。

失败:

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

我希望这能帮你省下不少麻烦。

小开

  1. 在S3桶的权限设置中设置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>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

  2. S3 adds CORS headers only when http request has the Origin header.

  3. CloudFront does not forward Origin header by default

    You need to whitelist Origin header in Behavior settings for your CloudFront Distribution.

小开

我将添加到__abc0 - above -这解决了我的问题。

要将AWS/CloudFront分发点设置为朝向CORS源标头，请单击进入分发点的编辑界面:

enter image description here

进入行为选项卡并编辑行为，将“基于所选请求头的缓存”从无更改为白名单，然后确保将Origin添加到白名单框中。更多信息请参见AWS文档中的配置CloudFront以尊重CORS设置。

enter image description here

小开

在最新的S3管理控制台中，当您单击Permissions选项卡上的CORS配置时，它将显示一个默认的示例CORS配置。然而，这个配置是不实际上是活动的!您必须首先单击save才能激活CORS。

我花了很长时间才弄明白，希望这能帮大家节省一些时间。

小开

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

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

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

我把它写如下:

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

为什么<AllowedHeader>*</AllowedHeader>可以工作而<AllowedHeader>Authorization</AllowedHeader>不行?

小开

@jordanstephens在评论中说过，但它有点丢失了，对我来说真的很容易修复。

我简单地添加HEAD方法并单击保存，它开始工作。

<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod> <!-- Add this -->
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

小开

这个配置为我解决了问题:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<ExposeHeader>ETag</ExposeHeader>
<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头文件

小开

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

小开

警告-黑客攻击。

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

小开 
<AllowedOrigin>*</AllowedOrigin>

这不是一个好主意，因为使用*将授予任何网站访问bucket中的文件的权限。相反，您应该指定确切允许哪个源使用bucket中的资源。通常，这是你的域名

<AllowedOrigin>https://www.example.com</AllowedOrigin>

或者如果你想包含所有可能的子域:

<AllowedOrigin>*.example.com</AllowedOrigin>
小开

下面是配置，它很好地为我工作。我希望这将有助于解决您在AWS S3上的问题。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<ExposeHeader>ETag</ExposeHeader>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
小开

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

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

请求上没有'Access-Control-Allow-Origin'报头 资源。< / p >

小开

为了它的价值，我有一个类似的问题-当试图添加一个特定的允许起源(不是*)。

结果我不得不纠正

<AllowedOrigin>http://mydomain:3000/</AllowedOrigin>

来

<AllowedOrigin>http://mydomain:3000</AllowedOrigin>

(注意URL中的最后一个斜杠)

希望这对大家有所帮助

小开

首先，激活S3存储桶中的CORS。使用以下代码作为指导:

<CORSConfiguration>
<CORSRule>
<AllowedOrigin>http://www.example1.com</AllowedOrigin>


<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>


<AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
<AllowedOrigin>http://www.example2.com</AllowedOrigin>


<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>


<AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>

2)如果还是不行，请确保在你的img标签中添加一个带“*”值的“crossorigin”。把这个放在你的html文件中:

  let imagenes = document.getElementsByTagName("img");
for (let i = 0; i < imagenes.length; i++) {
imagenes[i].setAttribute("crossorigin", "*");
小开

上面的大部分答案都没用。我试图上传图像到S3桶使用react-s3，我得到了这个

跨地域请求被阻止

错误。

你所要做的就是在s3 Bucket中添加CORS配置 访问S3 Bucket ->Persmission→歌珥配置 并粘贴下面的

<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现在期望规则在数组Json格式。中

你可以在s3 bucket中找到它->权限然后->向下滚动->跨地域资源共享(CORS)

[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"HEAD"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": [],
"MaxAgeSeconds": 3000
}
]
小开

更新CORS配置后，请清理浏览器缓存。我的工作后清洗缓存，而与strapi工作

小开

我有一个类似的问题，coderVishal的回答帮助我解决了这个问题，但在我的情况下，我需要使用一个Terraform与下一个配置:

resource "aws_s3_bucket" "bucket" {
bucket = var.bucket
acl    = "public-read"


# Cross-origin resource sharing (CORS)
cors_rule {
allowed_headers = ["*"]
allowed_methods = ["GET", "HEAD"]
allowed_origins = ["*"]
expose_headers  = []
max_age_seconds = 3000
}
}

在文档中阅读更多关于cors_rule参数的信息。

小开
在我的例子中，我用下面的配置来解决它 首先，进入权限，然后进入跨源资源共享(CORS) 然后点击编辑并粘贴下面的代码…

[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"PUT",
"POST",
"DELETE"
],
"AllowedOrigins": [
"http://www.example1.com"
],
"ExposeHeaders": []
},
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"PUT",
"POST",
"DELETE"
],
"AllowedOrigins": [
"http://www.example2.com"
],
"ExposeHeaders": []
},
{
"AllowedHeaders": [],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]

点击在这里查看更多信息

小开

对我来说，不加区域

Const s3 = new aws。S3({apiVersion: '2006-03-01'，区域:'us-west-2'});

小开

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

url.replace(/^https:\/\//i, "http://");
我不知道为什么，但这对我来说很有效。 如果您要将图像作为“BLOB"

小开

S3现在要求它以Javascript对象符号格式出现。

[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"HEAD"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]

我建议根据您的需求更改AllowedOrigins和AllowedMethods。


提交答案