Chrome S3 Cloudfront：在初始请求时，没有“Access-Control-Allow-Origin”标头

我有一个网页（ https://smartystreets.com/contact ），它使用jQuery从S3通过CloudFront CDN加载一些SVG文件。

在Chrome中，我将打开一个隐身窗口以及控制台。 然后我将加载页面。 在加载页面时，我通常会在控制台中看到6到8个类似于以下内容的消息：

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. 

如果我做了一个标准的页面重新载入，甚至多次，我仍然得到相同的错误。 如果我做了Command+Shift+R那么大多数，有时甚至所有的图像都会加载，而不会出现XMLHttpRequest错误。

有时甚至在图像加载之后，我将刷新，并且一个或多个图像将不会加载并再次返回XMLHttpRequest错误。

• 使用EC2作为Cloudfront原始服务器
• 从专用VPC子网访问Amazon S3
• EC2和Rackspace之间的外部负载平衡器解决scheme
• 从ec2-consistent-snapshot快照中恢复Amazon EBS RAID0arrays
• 在CentOS 7 EC2实例上禁用THP和THP碎片整理

我已经检查，更改并重新检查了S3和Cloudfront上的设置。 在S3中，我的CORSconfiguration如下所示：

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

（注意：最初只有<AllowedOrigin>*</AllowedOrigin> ，同样的问题。）

在CloudFront中，分配行为设置为允许HTTP方法： GET, HEAD, OPTIONS 。 caching的方法是一样的。 转发头设置为“白名单”，白名单包括“访问控制请求头，访问控制请求方法，来源”。

事实上，无caching的浏览器重新加载后，它似乎表明，一切都在S3 / CloudFront方面，否则为什么会传递内容。 但是，为什么内容不能在初始页面视图中传递呢？

我在macOS上的Google Chrome上工作。 每次获取文件，Firefox都没有问题。 歌剧从不获取文件。 Safari会在几次刷新后提取图片。

使用curl我不会有任何问题：

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

有人build议我删除CloudFront分配并重新创build它。 看起来像一个相当苛刻和不便的解决办法。

什么是造成这个问题？

更新：

从未能加载的图像添加响应头。

 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 

 'use strict'; // If the response lacks a Vary: header, fix it in a CloudFront Origin Response trigger. exports.handler = (event, context, callback) => { const response = event.Records[0].cf.response; const headers = response.headers; if (!headers['vary']) { headers['vary'] = [ { key: 'Vary', value: 'Access-Control-Request-Headers' }, { key: 'Vary', value: 'Access-Control-Request-Method' }, { key: 'Vary', value: 'Origin' }, ]; } callback(null, response); };