Question

我的AWS S3存储桶上保存了一张图片。这是我的CORS配置：

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

此外，该存储桶还有以下政策：

{
    "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.jpeg" crossorigin="anonymous" class="cr-image">

注意crossorigin属性。我进入Croppie的源并删除了该属性。但后来我得到了错误：

来自原始图片...已被跨源资源共享策略阻止加载：请求中不存在“Access-Control-Allow-Origin”标头资源

我该如何解决这个问题？

Answer 1

似乎CORS标头仍未正确设置。这个related Croppie issue #119提到您可以通过查看响应标头来检查它。

对于存储在存储桶中的图像，它是pretty easy to inspect the headers with curl：

curl -I -H "Origin: https://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

与在imgur上正确设置CORS标头相反：

curl -I -H "Origin: https://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

正如您所看到的，主要区别在于imgur会返回标题Access-Control-Allow-Methods和Access-Control-Allow-Origin，而您的S3存储桶则不会。

我已关注official Amazon documentation on the subject并将modified CORS configuration应用到我自己的存储桶中，与您的配置的区别在于the AllowedHeader element，它定义了响应中允许的标头。我把我的桶设置为：

<AllowedHeader>*</AllowedHeader>

以下是存储在我的存储桶中的图像上的结果标题：

curl -I -H "Origin: https://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

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

图像已保存，并且未在HTML5画布上显示Amazon S3存储桶。 Crossorigin问题

1 个答案: