Question

当我尝试通过javascript访问s3存储桶中存储的图像时，我在Chrome中不断收到此错误。但是，当在javascript之外访问它时，效果很好。据我了解，这是一种浏览器功能，可以阻止来自javascript的此类访问？

访问图像来自的“ https://s3.us-east-2.amazonaws.com/bucket/user1Image.jpg” 原产地“ http://0.0.0.0:5000”已被CORS政策禁止：否请求中存在“ Access-Control-Allow-Origin”标头资源。

我已使用此配置在s3存储桶中启用了cors

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

此外，我注意到Firefox，Safari和Chrome的行为不同。它可以在Firefox和safari中使用，但是在无法运行的情况下，Firefox仍可以使用。我在下面指定了更多详细信息

当我在这里阅读CORS文档-https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS时，它说响应标头看起来像

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 00:23:53 GMT
Server: Apache/2.0.61 
Access-Control-Allow-Origin: *
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml

但是，即使firefox和safari可以加载图像，在任何浏览器中我都看不到“ Access-Control-Allow-Origin：*”。

Chrome-这是我在chrome中看到的请求/响应标头。由于错误，没有响应标头

Request URL: https://s3.us-east-2.amazonaws.com/bucket/user1Image.jpg
Referrer Policy: no-referrer-when-downgrade

Origin: http://0.0.0.0:5000
Referer: http://0.0.0.0:5000/loadProfile
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36

Firefox-无论我在CORS配置文件中设置了什么，它都能工作。这是我在Firefox中看到的请求/响应标头

Request URL:https://s3.us-east-2.amazonaws.com/bucket/user1Image.jpg
Request method:GET
Remote address:52.219.100.202:443
Status code:
304
Version:HTTP/1.1
Referrer Policy:no-referrer-when-downgrade

Response Header
HTTP/1.1 304 Not Modified
x-amz-id-2: O5PBWb958FKloFY1uXQ8v/3nX1AAsNMiR7Ab7G3/KUp6CgDyrNoVcJMRNwVfIx1L1nbmDS0tLRY=
x-amz-request-id: F62898F1746E6813
Date: Sun, 02 Jun 2019 14:47:53 GMT
Last-Modified: Mon, 20 May 2019 22:14:24 GMT
ETag: "4f024beea08470ce862040f65436fc01"

Request Header

Host: s3.us-east-2.amazonaws.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:67.0) Gecko/20100101 Firefox/67.0
Accept: image/webp,*/*
Accept-Language: en-CA,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate, br
Referer: http://0.0.0.0:5000/loadProfile
Connection: keep-alive
If-Modified-Since: Mon, 20 May 2019 22:14:24 GMT
If-None-Match: "4f024beea08470ce862040f65436fc01"
Cache-Control: max-age=0

Safari-运行正常。这是我在Safari中看到的请求/响应标头。如果我更改为随机模式，它将停止工作，这是预期的行为，与firefox不同。

Summary
URL: https://s3.us-east-2.amazonaws.com/bucket/user1Image.jpg
Status: 200 OK
Source: Network
Address: 52.219.88.3:443

Request
GET /bucket/user1Image.jpg HTTP/1.1
Accept: image/png,image/svg+xml,image/*;q=0.8,video/*;q=0.8,*/*;q=0.5
Accept-Encoding: br, gzip, deflate
Host: s3.us-east-2.amazonaws.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_4) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1 Safari/605.1.15
Accept-Language: en-ca
Referer: http://0.0.0.0:5000/
Connection: keep-alive

Response
HTTP/1.1 200 OK
Content-Type: image/jpeg
Last-Modified: Mon, 20 May 2019 22:14:24 GMT
Date: Sun, 02 Jun 2019 13:48:10 GMT
Accept-Ranges: bytes
Content-Length: 76790
ETag: "4f024beea08470ce862040f65436fc01"
Server: AmazonS3
x-amz-request-id: E78D8F3C6EA55DAA
x-amz-id-2: 7wKTw2jJlSVpUIUOmyJevWCHDxdPjFTb5fhTLTM2KYUgbbmIprkECfB/R0a+5QVIIBBp/zre8tw=

我还尝试将允许的配置更改为所有域，但是chrome无法加载并继续引发相同的错误

<AllowedOrigin>*</AllowedOrigin>

更新1：

如果我在chrome浏览器上进行硬刷新，则可以正常工作。

更新2：

可能与此问题类似-Caching effect on CORS: No 'Access-Control-Allow-Origin' header is present on the requested resource

没有“ Access-Control-Allow-Origin”标头-镀铬

0 个答案: