I have a webpage (https://smartystreets.com/contact) that uses jQuery to load some SVG files from S3 through the CloudFront CDN.
In Chrome I will open an Incognito window as well as the console. Then I will load the page. As the page loads, I will typically get 6 to 8 messages in the console that look similar to this:
XMLHttpRequest cannot load https://d79i1fxsrar4t.cloudfront.net/assets/img/feature-icons/documentation.08e71af6.svg. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://smartystreets.com' is therefore not allowed access.
If I do a standard reload of the page, even multiple time, I continue to get the same errors. If I do
Command+Shift+R then most, and sometimes all, of the images will load without the
Sometimes even after the images have loaded, I will refresh and one or more of the images will not load and return that
XMLHttpRequest error again.
I have checked, changed, and re-checked the settings on S3 and Cloudfront. In S3 my CORS configuration looks like this:
<?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedOrigin>http://*</AllowedOrigin> <AllowedOrigin>https://*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>Authorization</AllowedHeader> </CORSRule> </CORSConfiguration>
(Note: initially had only
<AllowedOrigin>*</AllowedOrigin>, same problem.)
In CloudFront the distribution behavior is set to allow the HTTP Methods:
GET, HEAD, OPTIONS. Cached methods are the same. Forward Headers is set to "Whitelist" and that whitelist includes, "Access-Control-Request-Headers, Access-Control-Request-Method, Origin".
The fact that it works after a cache-less browser reload seems to indicate that all is well on the S3/CloudFront side, else why would the content be delivered. But then why would the content not be delivered on the initial page-view?
I am working in Google Chrome on macOS. Firefox has no problem getting the files every time. Opera NEVER gets the files. Safari will pick up the images after several refreshes.
curl I do not get any problems:
curl -I -H 'Origin: smartystreets.com' https://d79i1fxsrar4t.cloudfront.net/assets/img/phone-icon-outline.dc7e4079.svg HTTP/1.1 200 OK Content-Type: image/svg+xml Content-Length: 508 Connection: keep-alive Date: Tue, 20 Jun 2017 17:35:57 GMT Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET Access-Control-Max-Age: 3000 Last-Modified: Thu, 15 Jun 2017 16:02:19 GMT ETag: "dc7e4079f937e83291f2174853adb564" Cache-Control: max-age=31536000 Expires: Wed, 01 Jan 2020 23:59:59 GMT Accept-Ranges: bytes Server: AmazonS3 Vary: Origin,Access-Control-Request-Headers,Access-Control-Request-Method Age: 4373 X-Cache: Hit from cloudfront Via: 1.1 09fc52f58485a5da8e63d1ea27596895.cloudfront.net (CloudFront) X-Amz-Cf-Id: wxn_m9meR6yPoyyvj1R7x83pBDPJy1nT7kdMv1aMwXVtHCunT9OC9g==
Some have suggested that I delete the CloudFront distribution and recreate it. Seems like a rather harsh and inconvenient fix.
What is causing this problem?
Adding response headers from an image that failed to load.
age:1709 cache-control:max-age=31536000 content-encoding:gzip content-type:image/svg+xml date:Tue, 20 Jun 2017 17:27:17 GMT expires:2020-01-01T23:59:59.999Z last-modified:Tue, 11 Apr 2017 18:17:41 GMT server:AmazonS3 status:200 vary:Accept-Encoding via:1.1 022c901b294fedd7074704d46fce9819.cloudfront.net (CloudFront) x-amz-cf-id:i0PfeopzJdwhPAKoHpbCTUj1JOMXv4TaBgo7wrQ3TW9Kq_4Bx0k_pQ== x-cache:Hit from cloudfront