Javascript 允许来自 Amazon S3 的 AJAX GET 吗？（访问控制允许来源）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11315872/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Allow AJAX GETs from Amazon S3? (Access-Control-Allow-Origin)
提问by Ben Dilts
I'm storing JSON objects in Amazon S3, and I'd like to load that data directly from S3 from Javascript. My GET looks pretty generic:
我将 JSON 对象存储在 Amazon S3 中，我想从 Javascript 直接从 S3 加载该数据。我的 GET 看起来很一般：
$.ajax({
'type':'GET',
'url':'http://s3.amazonaws.com/mybucketname/'+id,
'dataType':'text',
'success':function(msg) {
alert(msg);
}
});
I get the following error:
我收到以下错误：
XMLHttpRequest cannot load http://s3.amazonaws.com/whatever/whatever. Origin http://mylocalhostname:9000 is not allowed by Access-Control-Allow-Origin.
I can get that URL from S3 using curl, or by navigating there directly from my browser. Am I really going to have to proxy all of these requests through my own servers?
我可以使用 curl 从 S3 获取该 URL，或者直接从我的浏览器导航到那里。我真的必须通过我自己的服务器代理所有这些请求吗？
回答by Ludo - Off the record
S3 doesn't send the 'Access-Control-Allow-Origin' header if you use the wildcard * like:
如果您使用通配符 *，S3 不会发送“Access-Control-Allow-Origin”标头，例如：
<AllowedOrigin>*</AllowedOrigin>
To force s3 sending the AllowedOrigin header but still let your content be loaded from any site, use this:
要强制 s3 发送 AllowedOrigin 标头但仍让您的内容从任何站点加载，请使用以下命令：
<AllowedOrigin>http://*</AllowedOrigin>
<AllowedOrigin>https://*</AllowedOrigin>
回答by Manmeet Singh
S3 now supports Cross Domain Requests using CORS file.
S3 现在支持使用 CORS 文件的跨域请求。
You can find more information here:
您可以在这里找到更多信息：
http://docs.amazonwebservices.com/AmazonS3/latest/dev/cors.html#how-do-i-enable-cors
http://docs.amazonwebservices.com/AmazonS3/latest/dev/cors.html#how-do-i-enable-cors
and:
和：
http://aws.typepad.com/aws/2012/08/amazon-s3-cross-origin-resource-sharing.html
http://aws.typepad.com/aws/2012/08/amazon-s3-cross-origin-resource-sharing.html
回答by griffon vulture
Searched a lot - This is the sample solution:
搜索了很多 - 这是示例解决方案：
http://blog.bignerdranch.com/1670-upload-directly-to-amazon-s3-with-support-for-cors/
http://blog.bignerdranch.com/1670-upload-directly-to-amazon-s3-with-support-for-cors/
(Add cors on bucket permissions tab)
（在存储桶权限选项卡上添加 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>
回答by equivalent8
We had a similar problem, but not with GET but with presigned S3 POST. I thought this may be helpful for someone googling this issue.
我们遇到了类似的问题，但不是 GET，而是预签名的 S3 POST。我认为这可能对搜索此问题的人有所帮助。
in some browsers Dropzone.js lib was not able to upload images directly to S3 bucket (presigned S3 POST). Weird part was that this was happening on some computers all the time and on some one out of twenty tries.
在某些浏览器中，Dropzone.js 库无法将图像直接上传到 S3 存储桶（预签名 S3 POST）。奇怪的是，这种情况一直在某些计算机上发生，并且在 20 次尝试中有一次发生。
On one computer we manage to capture the error in Firefox Debugger (network tab)
在一台计算机上，我们设法在 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).
Updating the S3 bucket CORS to this worked for us:
将 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>
important part is the <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>thanks to this S3 is exposing response header OPTIONSand POST
重要的部分是<ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>由于这个 S3 暴露了响应头OPTIONS和POST
Collaborative work of @anas-alaoui, @joserose& @equivalent
@anas-alaoui、@ joserose和 @equivalent 的协作工作
回答by Aatif Farooq
You can use a jsonp request instead of json. Here are the details. http://api.jquery.com/jQuery.ajax/
您可以使用 jsonp 请求而不是 json。这是详细信息。 http://api.jquery.com/jQuery.ajax/
回答by Richard Hazelden
I was struggling with the same sort of issue. only difference is i wanted to pull a file with Ajax from my S3 and load it into a site.
我正在努力解决同样的问题。唯一的区别是我想从我的 S3 中提取一个带有 Ajax 的文件并将其加载到站点中。
After a lot of searching i ended up adding this option to my Ajax request.
经过大量搜索，我最终将此选项添加到我的 Ajax 请求中。
xhrFields: { withCredentials: true },
xhrFields: { withCredentials: true },
Worked like a charm, as long as you have the CORSConfiguration to allow all.
只要你有 CORSConfiguration 允许所有，就像一个魅力一样工作。
hope it helps.
希望能帮助到你。
回答by ?eljko ?evi?
<?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>
This CORS configuration worked like a charm
这种 CORS 配置很有魅力
回答by OG Sean
You may want to increase the MAX AGE configuration if you have larger files that will take longer to download, or they may cut off early. Media hosting etc will need this. My config for wildcard access (any domain) was 10000 seconds max, which should be safely longer than anyone needs to download my files even on a bad connection:
如果您有更大的文件需要更长的时间来下载，或者它们可能会提前中断，您可能需要增加 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>
回答by treestompz
For anyone struggling with this issue, as others say you must force S3 to respond with CORS headers by adding these lines to your CORS configuration:
对于任何为此问题而苦苦挣扎的人，正如其他人所说，您必须通过将这些行添加到您的 CORS 配置来强制 S3 使用 CORS 标头进行响应：
<AllowedOrigin>http://*</AllowedOrigin>
<AllowedOrigin>https://*</AllowedOrigin>
BUT, you then must clear your browser file cache as the old headers on the requested resource are stored. In Chrome, find the Clear Browsing Dataoption and then choose to clear the filecache. A hard reload will not clear certain files. If you prefer to only clear the file cache only for the current site, this answerexplains how to do just that.
但是，您必须清除浏览器文件缓存，因为存储了请求资源上的旧标头。在 Chrome 中，找到清除浏览数据选项，然后选择清除文件缓存。硬重新加载不会清除某些文件。如果您只想清除当前站点的文件缓存，这个答案解释了如何做到这一点。
This was the gotcha for me.
这对我来说是个难题。
回答by sev
This is my Tip from: https://github.com/mozilla/pdf.js/issues/3150
这是我的提示：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>
