從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存儲桶提供服務。