允许来自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，或者直接在浏览器中访问该URL。难道我真的需要通过我的服务器代理所有这些请求吗？

- Ben Dilts

---

可能是Amazon S3和跨源资源共享（CORS）的重复问题。 - epascarello

或者另一个重复的问题：http://stackoverflow.com/questions/8674776/pull-data-our-of-json-with-jquery 展示了JSONP解决方案。 - epascarello

Answer 1

S3如果使用通配符*，则不会发送'Access-Control-Allow-Origin'头信息：

<AllowedOrigin>*</AllowedOrigin>

要强制s3发送AllowedOrigin头，但仍然允许从任何站点加载内容，请使用以下方法：

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

- Ludo - Off the record

---

我四处搜寻，这是我的解决方案。虽然不在亚马逊的文档中，但立即生效。您可以在同一个CORS规则中列出所有三个。 - grokpot

同样地，我所尝试的所有修复方法中，这是银弹。 - Christian

这对我也起作用了。我已经束手无策了。花了两个小时尝试了我能想到的一切，但什么都没用。你会认为他们要么在文档中提到这一点，要么做出改变以使两种方式都按预期工作。 - Blimey85

对我也起作用了！我试图使用jquery load函数将一个HTML文件从S3加载到Heroku上。 - Adrien Renaud

非常类似于@AdrienRenaud的解决方案，使用本地XMLHTTPRequest()类解决了我的HTML文件问题。 - The Onin

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

- Manmeet Singh

---

这不是一个cors文件，而是一个cors子资源。因此，对于那些尝试在您的存储桶中���储名为cors的文件的人，这样做是行不通的（我自己已经尝试过了）。 - Michael Mior

关于S3的跨域资源共享，需要注意的是，在应用策略时，已经存在于存储桶中的文件不会被更新。因此，请确保只将CORS策略应用于新桶，或在应用策略后重新添加内容。 - samsamm777

@samsamm777 我遇到了这个问题。我无法更新我的S3存储桶中的现有文件。如何使用CORS更新S3存储桶中的现有文件？ - Tushar Kulkarni

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>

- griffon vulture

Answer 4

我们遇到了类似的问题，但不是在GET请求中，而是在预签名的S3 POST中。我认为这可能对某些搜索此问题的人有所帮助。

在某些浏览器中，Dropzone.js库无法直接将图像上传到S3存储桶（预签名的S3 POST）。奇怪的是，这在某些计算机上始终发生，而在某些计算机上则需要尝试20次才会出现。

在一台计算机上，我们设法在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的协作工作

- equivalent8

Answer 5

您可以使用 JSONP 请求代替 JSON。以下是详细信息。 http://api.jquery.com/jQuery.ajax/

- Aatif Farooq

---

是的，但请参考Amazon CORS文档，因为这是Amazon支持的最近的选项，可选择启用域。 - Dean Radcliffe

Answer 6

<?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配置非常有效。

- Željko Šević

Answer 7

我遇到了同样的问题，只是我想通过Ajax从我的S3中拉取文件并将其加载到网站中。经过大量搜索，我最终在Ajax请求中添加了此选项。

xhrFields: { withCredentials: true },

只要您拥有CORS配置以允许所有内容，它就可以像魅力一样工作。

希望这可以帮助你。

- Richard Hazelden

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>

- sev

Answer 9

如果您有更大的文件需要下载，或者它们可能会提前中断，那么您可能希望增加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>

- OG Sean

Answer 10

对于任何遇到这个问题的人，正如其他人所说，您必须通过将以下行添加到CORS配置中来强制S3响应CORS标头：

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

但是，您必须清除浏览器文件缓存，因为请求资源的旧标头被存储在其中。在Chrome中，找到清除浏览数据选项，然后选择清除文件缓存。硬重载不会清除某些文件。如果您只想清除当前站点的文件缓存，请参阅this answer。

这就是我的问题所在。

- treestompz