S3 - Access-Control-Allow-Origin标头

Question

有没有人设法将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响应头。

Answer 1

通常，您需要做的就是在存储桶属性中“添加CORS配置”。

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

有关详细信息，请阅读Editing Bucket Permission上的这篇文章。

Answer 2

我尝试了上面的所有答案并没有奏效。实际上，我们需要从上面的答案中共同执行3个步骤才能使其工作：

正如Flavio所建议的那样;在您的存储桶上添加CORS配置： <CORSConfiguration> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> </CORSRule> </CORSConfiguration>
在图像上;提到crossorigin： <img href="abc.jpg" crossorigin="anonymous">
你在用CDN吗？如果一切正常连接到原始服务器但不通过CDN;这意味着您需要在CDN上进行一些设置，例如接受CORS标头。确切的设置取决于您使用的CDN。

Answer 3

我修改了它写下面的内容：

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

Answer 4

我到达了这个帖子，上述解决方案都没有适用于我的案例。事实证明，我只需要从我的存储桶的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>

我希望这可以节省一些拔毛的东西。

Answer 5

wuensche“回答”是正确的设置CDN;这样做，我删除了MaxAgeSeconds。

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

Answer 6

在最新的S3管理控制台中，当您单击“权限”选项卡上的CORS配置时，它将显示默认的CORS示例配置。但是，这种配置实际上并不活跃！您必须先单击“保存”才能激活CORS。

我花了太长时间才弄清楚这一点，希望这会节省一些时间。

Answer 7

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

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

Answer 8

像其他人一样，您首先需要在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标头

Answer 9

警告 - 黑客。

如果您使用S3Image显示图像并随后尝试通过fetch获取它，可能将其插入PDF或进行其他处理，请注意Chrome将缓存第一个不需要CORS预检请求的结果，以及然后尝试在没有预检OPTIONS请求的情况下获取相同的资源，并且由于浏览器限制而失败。

解决这个问题的另一种方法是确保S3Image包含crossorigin：'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问题现已解决。什么痛苦的侵害！

Answer 10

接受的答案有效，但似乎如果直接转到资源，则没有跨源头。如果您正在使用cloudfront，这将导致cloudfront缓存没有标头的版本。当您转到加载此资源的其他URL时，您将遇到此跨源问题。

Answer 11

我在加载网络字体方面遇到了类似的问题，当我点击“添加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中加载。我不是这方面的专家，我只是觉得这可能会帮助你。

Answer 12

@jordanstephens在评论中说这个，但它有点丢失，对我来说是一个非常简单的修复。

我只是添加了HEAD方法并点击了已保存并开始工作。

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

Answer 13

如果您的请求未指定Origin标头，则S3将不在响应中包含CORS标头。这真的让我失望，因为我一直试图卷曲文件来测试CORS，但卷曲不包括Origin。

Answer 14

这是一种简单的方法。

我知道这是一个老问题，但仍难以找到解决方案。

首先，这对我使用Rails 4，Paperclip 4，CamanJS，Heroku和AWS S3构建的项目起作用。

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

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

在AWS S3中将您的站点URL添加到CORS。 Here是亚马逊的一个参考。好吧，只需转到您的存储桶，然后从右侧的选项卡中选择“属性”，打开“权限”选项卡，然后单击“编辑CORS配置”。

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

这就是它的样子。

Answer 15

见上面的答案。（但我也有一个铬虫）

不要在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添加到了图片网址的末尾（但是你可以添加?blah，它只是随意更改缓存状态）当我为画布加载它时..如果你找到一个更好的修复Chrome的话请告诉我

Answer 16

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

要将AWS / CloudFront分发点设置为CORS Origin Header，请单击分发点的编辑界面：

转到行为选项卡并编辑行为，将“基于选定请求标头的缓存”从“无”更改为“白名单”，然后确保将Origin添加到列入白名单的框中。有关更多信息，请参阅AWS文档中的Configuring CloudFront to Respect CORS Settings。

Answer 17

我在将3D模型从S3加载到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>

Answer 18

在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>
仅当http请求具有Origin头时，S3才会添加CORS头。
默认情况下，CloudFront不转发Origin标头您需要在CloudFront分配的行为设置中将Origin标头列入白名单。

S3 - Access-Control-Allow-Origin标头

问题描述投票：147回答：18

18个回答

这是一种简单的方法。

最新问题

S3 - Access-Control-Allow-Origin标头

问题描述 投票：147回答：18

18个回答

这是一种简单的方法。

最新问题

问题描述投票：147回答：18