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

当前回答

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

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

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

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

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

Add your site URL to CORS in AWS S3. Here is a refference from Amazon about that. Pretty much, just go to your bucket, and then select "Properties" from the tabs on the right, open "Permissions tab and then, click on "Edit CORS Configuration". Originally, I had < AllowedOrigin> set to *. Just change that asterisk to your URL, be sure to include options like http:// and https:// in separate lines. I was expecting that the asterisk accepts "All", but apparently we have to be more specific than that.

对我来说是这样的。

2016-02-08 20:34:47

其他回答

<AllowedOrigin>*</AllowedOrigin>

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

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

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

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

2019-08-13 14:33:36

在我的例子中，我用下面的配置来解决它首先，进入权限，然后进入跨源资源共享(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": []
    }
]

点击这里了解更多信息

2021-04-08 08:07:22

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

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

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

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

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

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

对我来说是这样的。

2016-02-08 20:34:47

就像其他人说的，你首先需要在你的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头

2019-02-08 12:06:07

S3 - Access-Control-Allow-Origin头

推荐文章

最新文章

标签