从 S3 和 CloudFront 提供 Angular JS HTML 模板 - CORS 问题

Posted 2023-03-04

【中文标题】从 S3 和 CloudFront 提供 Angular JS HTML 模板 - CORS 问题

【英文标题】：Serving Angular JS HTML templates from S3 and CloudFront - CORS problems

【发布时间】：2013-03-07 11:54:48

【问题描述】：

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

我可以在 Firefox 上为我在 S3 上托管的 HTML 执行 jQuery.get 就好了。 CloudFront 同样返回一个OPTIONS 403 Forbidden。而且我无法在 Chrome 上为 S3 或 CloudFront 文件执行 ajax get。我认为 Angular 也有同样的问题。

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

我的问题是，如何让它在所有浏览器、CloudFront 和 Angular templateUrl 中运行？

【问题讨论】：

在这里回答：***.com/a/24459590/652693

【参考方案1】：

对于来自谷歌的人，更多

事实证明，当 CORS 设置位于 S3 存储桶上时，Amazon 实际上确实通过 SSL 支持 CORS。当云端缓存 CORS 响应的标头时，不好的部分就出现了。如果您从可能混合 http 和 https 的源中获取，您将遇到来自 CloudFront 的允许源会显示 http 但您想要 https 的情况。这当然会导致浏览器崩溃。更糟糕的是，如果您接受压缩内容，CloudFront 将缓存略有不同的版本。因此，如果您尝试使用 curl 进行调试，您会认为一切正常，然后发现它不在浏览器中（尝试将 --compressed 传递给 curl）。

一个无可否认的令人沮丧的解决方案就是放弃整个 CloudFront 并直接从 S3 存储桶提供服务。

【参考方案2】：

亚马逊目前似乎不支持 CloudFront 或 S3 上的 SSL 和 CORS，这是问题的症结所在。 Limelight 或 Akamai 等其他 CDN 允许您将 SSL 证书添加到 CNAME 以规避该问题，但亚马逊不允许这样做，并且其他 CDN 成本过高。最好的选择似乎是从您自己的域上的服务器提供 html。这是 Angular 和 Rails 的解决方案：https://***.com/a/12180837/256066