从S3和CloudFront服务Angular JS HTML模板 - CORS问题

Question

我有一段时间试图从Amazon CloudFront提供静态HTML模板。

我可以在Firefox上执行jQuery.get，因为我托管在S3上的HTML很好。 CloudFront的相同内容返回OPTIONS 403 Forbidden。我无法在Chrome上为S3或CloudFront文件执行ajax get。我认为Angular有同样的问题。

我不知道它如何获取远程模板，但它返回的错误号码与jQuery.get相同。根据亚马逊的技术支持，我的CORS配置没问题，正如我所说的，我可以直接从Firefox上的S3获取这些文件，因此可以在一种情况下使用。

我的问题是，如何在所有浏览器中使用CloudFront和Angular templateUrl？

Answer 1

看起来亚马逊目前不支持CloudFront或S3上的SSL和CORS，这是问题的关键。像Limelight或Akamai这样的其他CDN允许您将您的SSL证书添加到CNAME中，以避免该问题，但是亚马逊不允许任何其他CDN成本过高。最好的选择似乎是从您的域上的服务器提供html。这里是角和Rails的解决方案：https://stackoverflow.com/a/12180837/256066

Answer 2

对于人们从谷歌来了，多一点

原来亚马逊实际上是通过SSL不支持CORS当CORS设置上的S3桶。当cloudfront缓存CORS响应的标题时会出现不好的部分。如果您从可能混合的来源获取https，您会遇到CloudFront允许的来源会说http但希望https的情况。这当然会导致浏览器崩溃。更糟糕的是，如果您接受压缩内容，CloudFront将缓存稍微不同的版本。因此，如果你尝试用curl调试这个，你会认为一切都很好，然后发现它不在浏览器中（尝试传递 - 压缩卷曲）。

一个毫无疑问令人沮丧的解决方案就是抛弃整个CloudFront，直接从S3存储桶提供服务。