google-chrome – 最新的Chomium和Google Canary的Amazon S3的CORS问题

我们的网站在使用最新版本的Chromium(版本33.0.1722.0 – 237596)和Chrome Canary的Amazon S3存储区中加载CSS和JS资源时遇到问题.
它适用于任何其他浏览器,包括当前的Chrome(31.0.1650.57).

错误是:

源自’https://mybucket.s3.amazonaws.com‘的脚本已经被跨原始资源共享策略阻止加载:请求的资源上没有“Access-Control-Allow-Origin”头.原产地’https://app.example.com‘因此不允许进入.

我们在资源桶上的S3 CORS配置是:

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

这是Chromium的错误吗?
有什么改变最新的CORS规范?

最佳答案
很可能,您遇到S3 / CloudFront / CORS的一个非常有名的问题.我能够找到的最好的解决方案是在S3和CloudFront之间存在一个代理代码的应用程序,当对象返回时,始终将相应的CORS头添加到对象中.

当将CORS资产提供给不同的网络浏览器时,S3 CloudFront已损坏.这个问题是双重的.

>并不是所有的浏览器都要求CORS用于Web字体和其他静态资产.如果其中一个浏览器发出请求,S3将不会发送CORS头,CloudFront将缓存(无帮助)响应.
> CloudFront不支持Vary:Origin标头,因此对于AllowedOrigin值使用*是有问题的,只能缓存多个AllowedOrigin值中的第一个.

最后,这两个问题使S3 CloudFront成为使用CORS(快速)CDN解决方案的至关重要的解决方案 – 至少是开箱即用.防弹解决方案是创建一个简单的应用程序,代理S3和CloudFront之间的请求,始终添加必需的CORS头,使CloudFront始终缓存它们.

针对“冷”缓存请求

>←浏览器从CloudFront请求静态资产.
>←CloudFront未命中,并点击其原始服务器(代理应用程序).
>←代理应用程序将请求传递给S3.
→→S3回复代理应用程序.
>→代理应用程序添加正确的CORS头(S3是否已发送).代理应用程序回复到CloudFront.
>→CloudFront缓存结果并回复浏览器.

请求“温暖”缓存

>←浏览器从CloudFront请求静态资产.
>→CloudFront命中,并回复浏览器.

是的,这是一个众所周知的普遍问题:

> https://forums.aws.amazon.com/message.jspa?messageID=445325
> https://forums.aws.amazon.com/thread.jspa?messageID=404768
> https://forums.aws.amazon.com/message.jspa?messageID=346287
> https://forums.aws.amazon.com/message.jspa?messageID=278230
> https://forums.aws.amazon.com/thread.jspa?messageID=388132
> https://twitter.com/kindofwater/status/350630880651395072
> Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading
> https://coderwall.com/p/ub8zug
> http://timwhitlock.info/blog/2012/09/web-fonts-on-amazon-s3/
> http://www.yodi.sg/solve-load-font-face-cloudfront-amazon-s3-and-firefox-ie-caused-by-cors-access-control-allow-origin/
>还有更多!

我可以说,我们的S3和CloudFront团队很清楚这里讨论的问题.通过编写一个简单的应用程序,可以充当S3和CloudFront之间的代理,您可以在CloudFront缓存之前手动注入所有正确的CORS响应头.

如果您始终在Firefox中工作,那么您可能不会注意到此问题 – CloudFront将始终缓存启用了CORS的响应.如果您主要在Safari或Chrome中工作,那么当您切换回需要这些标头(Firefox和IE)的浏览器时,您会更频繁地看到它.此外,如果您有独立的开发/分段/生产环境,则可能会更频繁地遇到多起始问题.

转载注明原文:google-chrome – 最新的Chomium和Google Canary的Amazon S3的CORS问题 - 代码日志