javascript - 允许来自 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，或者直接从我的浏览器中导航。我真的必须通过我自己的服务器代理所有这些请求吗？

score 43 · Accepted Answer

如果您使用通配符 *，S3 不会发送“Access-Control-Allow-Origin”标头，例如：

<AllowedOrigin>*</AllowedOrigin>

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

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

score 40 · Accepted Answer

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

score 6 · Accepted Answer

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

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>

score 5 · Accepted Answer

我们遇到了类似的问题，但不是使用 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-aloui、@joserose和 @equivalent的合作工作

score 3 · Accepted Answer

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

score 1 · Accepted Answer

我正在为同样的问题而苦苦挣扎。唯一的区别是我想从我的 S3 中提取一个带有 Ajax 的文件并将其加载到一个站点中。

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

xhrFields: { withCredentials: true },

只要您拥有 CORSConfiguration 允许所有功能，就可以像魅力一样工作。

希望能帮助到你。

score 1 · Accepted Answer

<?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 配置就像一个魅力

score 0 · Accepted Answer

这是我的提示：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>

score 0 · Accepted Answer

就我而言，我想从存储桶“myBucket”中获取一些资源。

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

桶策略：

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

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

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

试试吧！，希望它有帮助！

score 0 · Accepted Answer

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

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

但是，您必须清除浏览器文件缓存，因为存储了所请求资源上的旧标头。在 Chrome 中，找到清除浏览数据选项，然后选择清除文件缓存。硬重新加载不会清除某些文件。如果您希望只清除当前站点的文件缓存，这个答案解释了如何做到这一点。

这对我来说是个问题。

score 0 · Accepted Answer

如果您有较大的文件需要更长的下载时间，您可能需要增加 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>

javascript - 允许来自 Amazon S3 的 AJAX GET？（访问控制允许来源）

11 回答 11

xhrFields: { withCredentials: true },

Related

Reference