从Amazon S3允许AJAX GET？(访问控制允许来源)

Question

我将JSON对象存储在Amazon S3中,我想直接从Javascript加载S3中的数据.我的GET看起来非常通用:

$.ajax({
    'type':'GET',
    'url':'http://s3.amazonaws.com/mybucketname/'+id,
    'dataType':'text',
    'success':function(msg) {
        alert(msg);
    }
});

我收到以下错误:

XMLHttpRequest cannot load http://s3.amazonaws.com/whatever/whatever. Origin http://mylocalhostname:9000 is not allowed by Access-Control-Allow-Origin.

我可以使用curl从S3获取该URL,或者直接从我的浏览器导航.我真的要通过自己的服务器代理所有这些请求吗？

Answer 1

如果您使用通配符*,S3不会发送'Access-Control-Allow-Origin'标头:

<AllowedOrigin>*</AllowedOrigin>

要强制s3发送AllowedOrigin标头但仍允许从任何站点加载您的内容,请使用以下命令:

<AllowedOrigin>http://*</AllowedOrigin>
<AllowedOrigin>https://*</AllowedOrigin>

Answer 2

S3现在支持使用CORS文件的跨域请求.

您可以在这里找到更多信息:

http://docs.amazonwebservices.com/AmazonS3/latest/dev/cors.html#how-do-i-enable-cors

和:

http://aws.typepad.com/aws/2012/08/amazon-s3-cross-origin-resource-sharing.html

Answer 3

搜索了很多 - 这是示例解决方案:

http://blog.bignerdranch.com/1670-upload-directly-to-amazon-s3-with-support-for-cors/

(在存储桶权限选项卡上添加cors)

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Answer 4

我们有一个类似的问题，但不是GET，而是预签名的S3 POST。我认为这可能对使用此问题的人有所帮助。

在某些浏览器中，Dropzone.js库无法将图像直接上传到S3存储桶（预签名的S3 POST）。奇怪的是，这种情况一直在某些计算机上发生，并且发生在二十次尝试中的某个尝试上。

在一台计算机上，我们设法捕获Firefox调试器中的错误（“网络”标签）

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://s3-eu-west-1.amazonaws.com/pobble.com-browser-uploads-production. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://s3-eu-west-1.amazonaws.com/pobble.com-browser-uploads-production. (Reason: CORS request failed).

将S3存储桶CORS更新到此对我们有用：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://www.myapp.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
        <ExposeHeader>Accept-Ranges</ExposeHeader>
        <ExposeHeader>Content-Range</ExposeHeader>
        <ExposeHeader>Content-Encoding</ExposeHeader>
        <ExposeHeader>Content-Length</ExposeHeader>
        <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>https://www.app.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
        <ExposeHeader>Accept-Ranges</ExposeHeader>
        <ExposeHeader>Content-Range</ExposeHeader>
        <ExposeHeader>Content-Encoding</ExposeHeader>
        <ExposeHeader>Content-Length</ExposeHeader>
        <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
    </CORSRule>
</CORSConfiguration>

重要的部分是<ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>由于此S3公开了响应标头OPTIONS和POST

@ anas-alaoui，@ joserose和@equivalent的合作工作