CORS最新Chomium和谷歌加那利问题与Amazon S3 [英] CORS problems with Amazon S3 on the latest Chomium and Google Canary

问题描述

我们的网站是有问题加载CSS和JS的资源在亚马逊S3存储与铬（版本33.0.1722.0 - 237596）的非常最新版本，Chrome Canary版。 它运作良好，与任何其他浏览器，包括当前的浏览器（31.0.1650.57）。

Our website is having problems loading CSS and JS resources on a Amazon S3 bucket with the very lastest version of Chromium (Version 33.0.1722.0 - 237596) and Chrome Canary. It works well with any of the other browsers including the current Chrome (31.0.1650.57).

该错误是：

脚本从原产地 https://mybucket.s3.amazonaws.com 已被禁止加载通过跨域资源共享政策：否访问控制 - 允许 - 原产地标头的请求的资源present。原产地 https://app.mysite.com ，因此不允许访问。的

Script from origin 'https://mybucket.s3.amazonaws.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://app.mysite.com' is therefore not allowed access.

我们的资源上的水桶S3 CORS的配置是：

Our S3 CORS configuration on the resource bucket is:

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

它是含铬的错误？ 做了一些变化对最新的CORS规范？

Is it a bug with Chromium? Did something change on the latest CORS spec?

推荐答案

在所有的可能性，你正在运行到一个非常著名的问题S3 / CloudFront的/ CORS。最好的解决办法我已经能够找到的是有一个应用程序，S3和CloudFront的之间的代理，一直在增加相应的CORS头的对象，因为他们回来。

In all likelihood, you're running into a very well-known problem with S3/CloudFront/CORS. The best solution I've been able to find is to have an app that proxies between S3 and CloudFront, always adding the appropriate CORS headers to the objects as they come back.

当谈到服务CORS资产，以不同的网页浏览器S3 + CloudFront的被打破。这个问题是双重的。

S3 + CloudFront are broken when it comes to serving CORS assets to different web browsers. The issue is two-fold.

• 不是所有的浏览器需要CORS的Web字体和其他静态资产。如果其中一个浏览器发出请求，S3将不发送CORS头和CloudFront的将缓存（无用）的响应。
• 在CloudFront的不支持有所不同：产地头，所以它有问题，使用 * 的 AllowedOrigin 价值，只会缓存首次多项 AllowedOrigin 值。

• Not all browsers require CORS for web fonts and other static assets. If one of these browsers makes the request, S3 won't send the CORS headers, and CloudFront will cache the (unhelpful) response.
• CloudFront doesn't support the Vary: Origin header, so it has issues with using * for the AllowedOrigin value, and will only cache the first of multiple AllowedOrigin values.

在最后，这两个问题让S3 + CloudFront的使用CORS用（快速）CDN解决方案是站不住脚的解决方案 - 至少，开箱即用。防弹解决方案是创建一个简单的应用程序来代理S3和CloudFront的的要求，一直在增加必要的CORS头，这样CloudFront的总缓存它们。

In the end, these two issues make S3 + CloudFront an untenable solution for using CORS with a (fast) CDN solution — at least, out of the box. The bulletproof solution is to create a simple app that proxies the requests between S3 and CloudFront, always adding the requisite CORS headers so that CloudFront always caches them.

要求对冷缓存

• ←浏览器的请求从CloudFront的静态资产。
• ←CloudFront的失误，并达到其原始服务器（代理应用程序）。
• ←代理应用程序将请求传递给S3。
• →S3响应返回给代理服务器应用程序。
• →代理应用程序添加正确的CORS头（S3是否已经发送与否）。代理应用程序响应回到CloudFront的。
• →CloudFront的缓存结果并响应返回给浏览器。

要求对热缓存

• ←浏览器的请求从CloudFront的静态资产。
• →CloudFront的点击率，并响应返回给浏览器。

是的，这是众所周知的，wides $ P $垫问题：

Yes, this is a well-known, widespread issue:

• <一个href="https://forums.aws.amazon.com/message.jspa?messageID=445325">https://forums.aws.amazon.com/message.jspa?messageID=445325
• <一个href="https://forums.aws.amazon.com/thread.jspa?messageID=404768">https://forums.aws.amazon.com/thread.jspa?messageID=404768
• <一个href="https://forums.aws.amazon.com/message.jspa?messageID=346287">https://forums.aws.amazon.com/message.jspa?messageID=346287
• <一个href="https://forums.aws.amazon.com/message.jspa?messageID=278230">https://forums.aws.amazon.com/message.jspa?messageID=278230
• <一个href="https://forums.aws.amazon.com/thread.jspa?messageID=388132">https://forums.aws.amazon.com/thread.jspa?messageID=388132
• <一个href="https://twitter.com/kindofwater/status/350630880651395072">https://twitter.com/kindofwater/status/350630880651395072
• <一个href="http://stackoverflow.com/questions/12229844/amazon-s3-cors-cross-origin-resource-sharing-and-firefox-cross-domain-font-loa">Amazon S3 CORS（跨域资源共享）和Firefox跨域字体加载
• 的https：//$c$crwall.com/p/ub8zug
• <一个href="http://timwhitlock.info/blog/2012/09/web-fonts-on-amazon-s3/">http://timwhitlock.info/blog/2012/09/web-fonts-on-amazon-s3/
• <一个href="http://www.yodi.sg/solve-load-font-face-cloudfront-amazon-s3-and-firefox-ie-caused-by-cors-access-control-allow-origin/">http://www.yodi.sg/solve-load-font-face-cloudfront-amazon-s3-and-firefox-ie-caused-by-cors-access-control-allow-origin/
• 和更多！的

• 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/
• And many more!

我可以说，我们的S3和CloudFront的团队是良好的了解这里所讨论的问题。通过编写一个简单的应用程序，可以作为S3和CloudFront的之间的代理，您可以手动注入所有正确的CORS响应头前CloudFront的缓存它们。

I can say that our S3 and CloudFront teams are well-aware of the issues discussed here. By writing up a simple app that can act as a proxy between S3 and CloudFront, you can manually inject all of the correct CORS response headers before CloudFront caches them.

如果你总是工作在Firefox，那么你很可能不会注意到这个问题 - CloudFront的将永远是你的缓存CORS功能的响应。如果您在Safari或Chrome主要是工作，你会看到它更经常，当你切换到需要这些头（Firefox和IE）浏览器。此外，如果您有独立的开发/分期/生产环境中，你可能会更经常碰到的多起源的问题。

If you always work in Firefox, then you likely won't notice the issue — CloudFront will always be caching your CORS-enabled responses. If you work primarily in Safari or Chrome, you'll see it much more often when you switch back to a browser which requires these headers (Firefox and IE). Also, if you have separate development/staging/production environments, you're likely to run into the multi-origin issues more often.

这篇关于CORS最新Chomium和谷歌加那利问题与Amazon S3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！