从Amazon S3允许AJAX GET？ （访问控制允许来源）

Question

我正在Amazon S3中存储JSON对象，我想直接从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没有发送“访问控制 - 允许 - 来源”＃39;标头，如果您使用通配符*喜欢：

<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 lib无法将图像直接上传到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＆amp;的协作工作@equivalent

Answer 5

您可以使用jsonp请求而不是json。这是详细信息。 http://api.jquery.com/jQuery.ajax/

Answer 6

我正在努力解决同样的问题。唯一的区别是我想从我的S3中使用Ajax提取文件并将其加载到站点中。

经过大量搜索后，我最终将此选项添加到我的Ajax请求中。

xhrFields：{withCredentials：true}，

只要你拥有允许所有人的CORSConfiguration，就像魅力一样。

希望它有所帮助。

Answer 7

如果您有较大的文件需要更长的下载时间，或者它们可能会提前中断，您可能需要增加MAX AGE配置。媒体托管等将需要这个。我对通配符访问（任何域）的配置最大为10000秒，即使连接错误，也应该比任何人下载我的文件安全地长：

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

Answer 8

这是我的提示：https://github.com/mozilla/pdf.js/issues/3150

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
        <ExposeHeader>Accept-Ranges</ExposeHeader>
        <ExposeHeader>Content-Range</ExposeHeader>
        <ExposeHeader>Content-Encoding</ExposeHeader>
        <ExposeHeader>Content-Length</ExposeHeader>
    </CORSRule>
</CORSConfiguration>

Answer 9

对于任何在此问题上苦苦挣扎的人，正如其他人所说，您必须通过将以下行添加到CORS配置中来强制S3使用CORS标头进行响应：

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

但是，由于存储了所请求资源上的旧标头，因此您必须清除浏览器文件缓存。在Chrome中，找到清除浏览数据选项，然后选择清除文件缓存。硬重装不会清除某些文件。如果您只希望仅清除当前站点的文件缓存，请this answer说明如何做到这一点。

这是我的陷阱。

Answer 10

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

此CORS配置就像一个魅力

Answer 11

对于我来说，我想从存储桶“ myBucket”中获取一些资源。

在S3客户端上，AWS S3现在支持JSON以配置CORS策略[ref]

时段政策：

[
    {
        "AllowedHeaders": [
            "*",
            "x-amz-*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

在服务器端/客户端（ JQUERY Ajax ）

$.ajax({
    type: "GET", 
    url: "https://myBucket/myObject",
});​​​​​​​​​​​​​​​

尝试一下！希望对您有所帮助！