Amazon s3 Javascript-请求的资源上不存在“Access-Control-Allow-Origin”标头
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28568794/
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
Amazon s3 Javascript- No 'Access-Control-Allow-Origin' header is present on the requested resource
提问by John
Am trying to upload my file via:
我正在尝试通过以下方式上传我的文件：
console.log("not broken til here");
scope.inputMemeIsFile=true;
var bucket = new AWS.S3({params: {Bucket: 'townhall.images'}});
file = image.file;
console.log(file);
var params = {Key: file.name, ContentType: file.type, Body: file};
bucket.upload(params, function (err, data) {
var result = err ? 'ERROR!' : 'UPLOADED.';
console.log(result);
console.log(err);
});
However, am getting the following error:
但是，我收到以下错误：
XMLHttpRequest cannot load https://s3.amazonaws.com/<BUCKETNAME>/favicon.jpg. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:5000' is therefore not allowed access.
with the proceedingError: Network Failure {message: "Network Failure", code: "NetworkingError", time: Tue Feb 17 2015 13:37:06 GMT-0500 (EST), region: "us-east-1", hostname: "s3.amazonaws.com"…}
与procedureError：Network Failure {message: "Network Failure", code: "NetworkingError", time: Tue Feb 17 2015 13:37:06 GMT-0500 (EST), region: "us-east-1", hostname: "s3.amazonaws.com"…}
My CORS config looks like the following and I have tried a couple things with no luck.
我的 CORS 配置如下所示，我尝试了几件事但没有成功。
<?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>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
Anyone have any idea whats wrong? I've looked at 5-6 similar posts but no one seems to be able to solve the problem.
任何人都知道什么是错的？我看过 5-6 篇类似的帖子，但似乎没有人能够解决这个问题。
回答by jungy
In order to upload files via browser, you should ensure that you have configured CORS for your Amazon S3 bucket and exposed the "ETag" header via the ETag declaration.
为了通过浏览器上传文件，您应确保已为 Amazon S3 存储桶配置 CORS 并通过 ETag 声明公开“ETag”标头。
I would suggest you start with an open test configuration and then modifying it to your needs:
我建议你从一个开放的测试配置开始，然后根据你的需要修改它：
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>HEAD</AllowedMethod>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
<ExposeHeader>ETag</ExposeHeader>
</CORSRule>
</CORSConfiguration>
Then check your bucket permissions and your AWSconfiguration (accessKeyId, secretAccessKey, and region) since none of these are present in your snippet.
然后检查您的存储桶权限和您的AWS配置（accessKeyId、secretAccessKey和region），因为这些都不存在于您的代码段中。
For testing, go to your IAM Management Console and create a new IAM user named prefix-townhall-testthen create a group with this simple policy that grants access to a bucket:
为了进行测试，请转到您的 IAM 管理控制台并创建一个名为的新 IAM 用户，prefix-townhall-test然后使用此授予对存储桶的访问权限的简单策略创建一个组：
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": ["s3:ListBucket"],
"Resource": ["arn:aws:s3:::test-bucket-name"]
},
{
"Effect": "Allow",
"Action": [
"s3:PutObject",
"s3:GetObject",
"s3:DeleteObject"
],
"Resource": ["arn:aws:s3:::test-bucket-name/*"]
}
]
}
Make sure the user you created is using the new group with this policy.
确保您创建的用户正在使用具有此策略的新组。
Now create a simple test script like the one used on amazon this:
现在创建一个简单的测试脚本，就像在亚马逊上使用的一样：
HTML
HTML
<input id="file-chooser" type="file" />
<button id="upload-button">Upload</button>
<p id="results"></p>
CODE (on DOM ready)
代码（在 DOM 上）
// update credentials
var credentials = {accessKeyId: 'new accessKeyId', secretAccessKey: 'new secretAccessKey'};
AWS.config.update(credentials);
AWS.config.region = 'us-west-1';
// create bucket instance
var bucket = new AWS.S3({params: {Bucket: 'test-bucket-name'}});
var fileChooser = document.getElementById('file-chooser');
var button = document.getElementById('upload-button');
var results = document.getElementById('results');
button.addEventListener('click', function() {
var file = fileChooser.files[0];
if (file) {
results.innerHTML = '';
var params = {Key: file.name, ContentType: file.type, Body: file};
bucket.upload(params, function (err, data) {
results.innerHTML = err ? 'ERROR!' : 'UPLOADED.';
});
} else {
results.innerHTML = 'Nothing to upload.';
}
}, false);
回答by Edu Lomeli
Some browsers, such as Chrome, do not support localhostor 127.0.0.1for CORS requests.
某些浏览器（例如 Chrome）不支持localhost或不支持127.0.0.1CORS 请求。
Try using instead: http://lvh.me:5000/
尝试使用： http://lvh.me:5000/
See https://stackoverflow.com/a/10892392/1464716for more.
有关更多信息，请参阅https://stackoverflow.com/a/10892392/1464716。
回答by ermouth
Try <AllowedOrigin>*</AllowedOrigin>, without protocol.
尝试<AllowedOrigin>*</AllowedOrigin>，没有协议。
If it has no effect – you probably have problem on client side.
如果它没有效果——你可能在客户端有问题。
回答by Jimmy Bernljung
Have you tried specifying your origin instead of using wildcard. I'm pretty sure we had similar problems in the past.
您是否尝试过指定您的来源而不是使用通配符。我很确定我们过去也遇到过类似的问题。
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>http://127.0.0.1:5000</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
