2

I keep getting this error in Chrome when I'm trying access an image stored in s3 bucket via javascript. However, it works fine when it is accessed outside of javascript. As far as I understand, it is a browser functionality to block such access from javascript?

Access to image at 'https://s3.us-east-2.amazonaws.com/bucket/user1Image.jpg' from origin 'http://0.0.0.0:5000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have enabled cors in my s3 bucket using this configuration

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

Also, I have noticed different behavior in firefox, safari and chrome. It works in Firefox and safari but firefox is working in instances it shouldn't work. I have specified more details below

When I read through CORS documentation here - https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS, it says response header would look like 

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

But I don't see "Access-Control-Allow-Origin: *" in any of the browsers even though firefox and safari can load the image.

Chrome - This is the request/response header I see in chrome. There is no response header due to error I believe 

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 - works regardless of what I set for in CORS configuration file. This is the request/response header I see in 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 - works fine. This is the request/response header I see in Safari. If I changed to something random it stops working which should be expected behaviour unlike 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=

I have also tried to change allowed configuration to all the domains but still chrome cannot load and keep throwing the same error

<AllowedOrigin>*</AllowedOrigin>

Update 1:

If I do hard refresh on chrome browser then it works.

Update 2:

Might be similar to this issues - Caching effect on CORS: No 'Access-Control-Allow-Origin' header is present on the requested resource

jas
  • 1,539
  • 5
  • 17
  • 30
  • 3
    Well one possible issue is that you're referring to an `https://` URL from an `http://` page. – Pointy Jun 02 '19 at 15:06
  • HTTP connection is most likely getting upgraded automatically on those browsers that are working (but seemingly should not be). Chrome is probably failing the pre-flight and won't upgrade. Try changing the URL for the image to `//s3.us-east-2.amazonaws.com/bucket/user1Image.jpg` (note lack of protocol) if that is possible. – Randy Casburn Jun 02 '19 at 15:11
  • @Pointy I have edited the post and I have tried to change the "allowedorigin" to all but still nothing changes. I have uploaded to my domain that has https but still chrome cannot load the images – jas Jun 02 '19 at 15:41
  • @RandyCasburn I tried taking out the protocol but still the same issues with chrome – jas Jun 02 '19 at 15:42
  • Next guess is that you are not allowing headers. Add the `*` to your CORS config. This is sometimes an issue with Chrome pre-flight requests too. – Randy Casburn Jun 02 '19 at 15:45
  • @RandyCasburn That's already present in the configuration HEAD * – jas Jun 02 '19 at 15:47

0 Answers0