保存的图像Amazon S3 bucket不显示在HTML5画布上。 Crossorigin问题 [英] Image saved con Amazon S3 bucket not showing on HTML5 canvas. Crossorigin issue

问题描述

我有一张图片储存在我的AWS S3值区中。这是我的CORS配置：

 < CORSConfiguration> 
< CORSRule> 
< AllowedOrigin> *< / AllowedOrigin> 
< AllowedMethod> GET< / AllowedMethod> 
< MaxAgeSeconds> 3000< / MaxAgeSeconds> 
< AllowedHeader>授权< / AllowedHeader> 
< / CORSRule> 
< / CORSConfiguration> 
  

此外，Bucket还有以下政策：

  {
Version：2012-10-17，
Id：Policy1468082822770，
Statement：[
 {
Sid：Stmt1468082812651，
Effect：Allow，
Principal：*，
Action：s3 ：GetObject，
Resource：arn：aws：s3 ::: criptolibertad / *
} 
] 
} 
  

这是图片： https://criptolibertad.s3.amazonaws.com/Django/0_startproject.jpeg ，你可以看到，它是公开的。我使用的图书馆名为 Croppie ，尝试将图片加载到画布中。但画布不显示图像我不知道为什么。 js看起来像这样：

  croppie_div.croppie（'bind'，{
 url：{{carta_magicpy。 imagen_base.url}}，
 points：[10,10,300,600] 
}）; 
  

url 属性只是一个变量由Django。在渲染时它看起来像这样：

 < img style =opacity：0; src =https://criptolibertad.s3.amazonaws.com/Django/0_startproject.jpegcrossorigin =anonymousclass =cr-image> 
  

请注意 crossorigin 属性。我进入Croppie的源并删除该属性。但是，我得到的错误：

来源的图片...已被跨源资源共享策略阻止加载：
在请求的
资源上不存在'Access-Control-Allow-Origin'标题

这个？

解决方案

似乎仍然没有正确设置CORS标题。此相关Croppie问题＃119 提及您可以通过查看响应标头来检查。 / p>

这是

  curl -I  - 对于存储在您的存储桶中的映像， H起源：http://stackoverflow.com/questions/38365182-H访问控制请求方法：GEThttps://criptolibertad.s3.amazonaws.com/Django/0_startproject.jpeg 
 HTTP / 1.1 200 OK 
 x-amz-id-2：9AaMwS9s2Im + OV6YlzVKrDW8RnbQqFt4Ygc + pRa3XM4iDmnJqlO8DQ7EjvpT4W4GnhGc0IvoQeI = 
 x-amz-request-id：CD4E7C50B5186192 
日期：Fri，15 Jul 2016 07:54 ：52 GMT 
 Last-Modified：Sat，09 Jul 2016 05:13:33 GMT 
 ETag：5733f7cd0187eb3a840bbe83e2c66a9b
 Accept-Ranges：bytes 
 Content-Type：image / jpeg 
 Content-Length：33402 
服务器：AmazonS3 
  

在例如imgur上正确设置CORS标头：

  curl -I -H原文：http://stackoverflow.com/questions / 38365182-HAccess-Control-Request-Method：GEThttp://i.imgur.com/HMf7XWD.jpg 
 HTTP / 1.1 200 OK 
 Last-Modified：Wed，06 Jul 2016 15:07:13 GMT 
 ETag：7b01be4b9235542038f6d9793cc2c620
内容类型：image / jpeg 
快速调试 - 摘要：f94b623450bb8143aff369600bf855d6332bb44c12070f02b0fc95648eac6ef3 
 cache-control：public，max- age = 31536000 
 Content-Length：2457350 
 Accept-Ranges：bytes 
 Date：Fri，15 Jul 2016 07:55:15 GMT 
年龄：277937 
 Connection ：keep-alive 
 X-Served-By：cache-iad2131-IAD，cache-fra1232-FRA 
 X-Cache：HIT，HIT 
 X-Cache-Hits：1，1 
 X-Timer：S1468569315.725739，VS0，VE2 
访问控制允许方法：GET，选项
访问控制允许原产地：* 
服务器：cat factory 1.0 
  

正如你可以看到的主要区别是imgur返回头 Access -Control-Allow-Methods 和 Access-Control-Allow-Origin ，而您的S3存储桶没有。

我已遵循有关此主题的亚马逊官方文档，并将修改的CORS配置应用于我自己的Bucket，与您的配置的区别是 AllowedHeader 元素，它定义了响应中允许的标头。我将我的桶设置为：

 < AllowedHeader> *< / AllowedHeader> 
  

这是存储在我的存储桶中的映像的结果标题：

  curl -I -H原产地：http://stackoverflow.com/questions/38365182-HAccess-Control-Request-Method：GEThttps ：//so38134984.s3.amazonaws.com/rainbow_dash.png 
 HTTP / 1.1 200 OK 
 x-amz-id-2：ANxPKoL3JDsLDGerTf8gdcyRU7U4Ozg4eMYJ9ADlX / 2qcBmx0dsmAbZxv2h / tFfQIXbkAs + x5iA = 
 x-amz -request-id：737E30AE2F8634FC 
日期：Fri，15 Jul 2016 07:53:55 GMT 
访问控制允许原产地：* 
访问控制允许方法：GET 
访问控制 - 最大 - 年龄：3000 
变化：原因，访问控制请求头，访问控制请求方法
最后修改：Mon，04 Jul 2016 20： 09:19 GMT 
 ETag：3ad1bb64b913c2eadab216b96034b990
 Accept-Ranges：bytes 
 Content-Type：image / png 
 Content-Length：148647 
服务器：AmazonS3 
  

我假设我的图片现在可以在您的Croppie脚本中正常工作。

I have an image saved on my AWS S3 bucket. This is my CORS configuration:

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Also, the bucket has this policy:

{
    "Version": "2012-10-17",
    "Id": "Policy1468082822770",
    "Statement": [
        {
            "Sid": "Stmt1468082812651",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::criptolibertad/*"
        }
    ]
}

This is the image: https://criptolibertad.s3.amazonaws.com/Django/0_startproject.jpeg , as you can see, it is public. I use a library called Croppie that tries to load the image into a canvas. But the canvas doesn't show the image I don't know why. The js looks like this:

croppie_div.croppie('bind', {
    url: "{{ carta_magicpy.imagen_base.url }}",
    points:  [10,10,300,600]
});

That url attribute is just a variable rendered by Django. It looks like this when it is rendered:

<img style="opacity: 0;" src="https://criptolibertad.s3.amazonaws.com/Django/0_startproject.jpeg" crossorigin="anonymous" class="cr-image">

Notice the crossorigin attribute. I went into Croppie's source and removed that attribute. But then I get the error:

Image from origin ... has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

How can I solve this?

解决方案

Seems the CORS headers are still not set correctly. This related Croppie issue #119 mentions you can check that by looking at the response headers.

It's pretty easy to inspect the headers with curl, for the image stored in your bucket:

curl -I -H "Origin: http://stackoverflow.com/questions/38365182" -H "Access-Control-Request-Method: GET" https://criptolibertad.s3.amazonaws.com/Django/0_startproject.jpeg
HTTP/1.1 200 OK
x-amz-id-2: 9AaMwS9s2Im+OV6YlzVKrDW8RnbQqFt4Ygc+pRa3XM4iDmnJqlO8DQ7EjvpT4W4GnhGc0IvoQeI=
x-amz-request-id: CD4E7C50B5186192
Date: Fri, 15 Jul 2016 07:54:52 GMT
Last-Modified: Sat, 09 Jul 2016 05:13:33 GMT
ETag: "5733f7cd0187eb3a840bbe83e2c66a9b"
Accept-Ranges: bytes
Content-Type: image/jpeg
Content-Length: 33402
Server: AmazonS3

As opposed to the properly set up CORS headers on e.g imgur:

curl -I -H "Origin: http://stackoverflow.com/questions/38365182" -H "Access-Control-Request-Method: GET" http://i.imgur.com/HMf7XWD.jpg
HTTP/1.1 200 OK
Last-Modified: Wed, 06 Jul 2016 15:07:13 GMT
ETag: "7b01be4b9235542038f6d9793cc2c620"
Content-Type: image/jpeg
Fastly-Debug-Digest: f94b623450bb8143aff369600bf855d6332bb44c12070f02b0fc95648eac6ef3
cache-control: public, max-age=31536000
Content-Length: 2457350
Accept-Ranges: bytes
Date: Fri, 15 Jul 2016 07:55:15 GMT
Age: 277937
Connection: keep-alive
X-Served-By: cache-iad2131-IAD, cache-fra1232-FRA
X-Cache: HIT, HIT
X-Cache-Hits: 1, 1
X-Timer: S1468569315.725739,VS0,VE2
Access-Control-Allow-Methods: GET, OPTIONS
Access-Control-Allow-Origin: *
Server: cat factory 1.0

As you can see the main difference is that imgur returns the headers Access-Control-Allow-Methods and Access-Control-Allow-Origin, while your S3 bucket does not.

I have followed the official Amazon documentation on the subject and applied the modified CORS configuration to my own bucket, the difference from your configuration is the AllowedHeader element, which defines the headers to allowed in response. I set my bucket to:

<AllowedHeader>*</AllowedHeader>

Here are the resulting headers on the image stored in my bucket:

curl -I -H "Origin: http://stackoverflow.com/questions/38365182" -H "Access-Control-Request-Method: GET" https://so38134984.s3.amazonaws.com/rainbow_dash.png
HTTP/1.1 200 OK
x-amz-id-2: ANxPKoL3JDsLDGerTf8gdcyRU7U4Ozg4eMYJ9ADlX/2qcBmx0dsmAbZxv2h/tFfQIXbkAs+x5iA=
x-amz-request-id: 737E30AE2F8634FC
Date: Fri, 15 Jul 2016 07:53:55 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
Last-Modified: Mon, 04 Jul 2016 20:09:19 GMT
ETag: "3ad1bb64b913c2eadab216b96034b990"
Accept-Ranges: bytes
Content-Type: image/png
Content-Length: 148647
Server: AmazonS3

I assume my image will now work properly in your Croppie script.

这篇关于保存的图像Amazon S3 bucket不显示在HTML5画布上。 Crossorigin问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！