AWS CloudFront支持CORS

Question

我正在尝试构建一个应用程序，用户通过CloudFront将内容上传到S3存储桶的浏览器。 我已经在S3存储桶上启用了CORS，并确保AllowedOrigin设置为*。 我可以成功地从浏览器直接将内容推送到S3存储桶，因此我知道S3上的CORS已正确配置。现在，我正在尝试使用浏览器 -> CloudFront -> S3执行相同的操作。 CloudFront始终拒绝预检OPTIONS方法请求，并返回403禁止响应。

我在CloudFront上启用了以下选项：

- 允许的HTTP方法：GET、HEAD、OPTIONS、PUT、POST、PATCH、DELETE - 白名单头：Access-Control-Request-Headers、Access-Control-Request-Method、Origin - "Cached HTTP Methods"中禁用OPTIONS请求

CloudFront显然支持CORS，但是否有人已经使其支持HTTP方法OPTIONS请求？我尝试在AWS论坛上提问，但没有回复。

- ravishi

Answer 1

您尝试为您的CloudFront域名添加CNAME别名了吗？

设置CNAME别名后，您可以在基础域上设置cookie，然后就能够传递您的cookie了。

如果有人想知道下一步是什么，让我们详细说明一下，我们使用以下示例：

1. 您正在开发 my.fancy.site.mydomain.com
2. 您的Cloudfront CNAME别名是 content.mydomain.com
3. 确保您从fancy应用程序中将您的cloudfront签名cookie设置为.mydomain.com
4. 从此时起，您就能够传递CF的cookie了。
5. 测试cookie是否正确设置的一个快速方法是尝试获取您的资产URL，并直接将URL放入浏览器中。如果cookie正确设置，您将能够直接访问该文件。

如果您使用JavaScript获取CDN资产，请确保在您的JS代码中，您需要传递withCredentials选项，否则它将无法工作。例如，如果您使用jQuery，则需要类似以下内容：

$.ajax({
   url: a_cross_domain_url,
   xhrFields: {
       withCredentials: true
   }
});

如果请求成功，您应该从CloudFront获得一个响应头，其中包含“Access-Control-blah-blah”。

希望这能帮助那些搜索这个答案的人。

- R.R

---

谢谢您的回答，但我不认为它会有所帮助。正如我在问题中所述，我可以成功地直接从签名的S3 URL检索文件，因此我不认为这是身份验证问题（即cookie或签名URL）。问题在于当CloudFront位于中间并且浏览器执行CORS OPTION请求时，CloudFront总是拒绝它。 - ravishi

Answer 2

我发现了一个非常相似的问题。CloudFront分发没有将头信息发送到S3。您可以通过以下方式轻松测试：

curl -i -H "Origin: http://YOUR-SITE-URL" http://S3-or-CLOUDFRONT-URL | grep Access

如果你遇到了同样的问题，可以在这里看到我的解决方案：

AWS S3 + CloudFront gives CORS errors when serving images from browser cache

- CharlieH