![](/img/trans.png)
[英]Amazon S3 weird CORS behaviour: No 'Access-Control-Allow-Origin' header is present on the requested resource
[英]Amazon s3 Javascript- No 'Access-Control-Allow-Origin' header is present on the requested resource
我正在尝试通过以下方式上传我的文件:
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);
});
但是,我收到以下错误:
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.
与progressingError: 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"…
}
我的 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>
任何人都知道什么是错的? 我看过 5-6 篇类似的帖子,但似乎没有人能够解决这个问题。
为了通过浏览器上传文件,您应确保已为 Amazon S3 存储桶配置 CORS 并通过 ETag 声明公开“ETag”标头。
我建议你从一个开放的测试配置开始,然后根据你的需要修改它:
<?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>
然后检查您的存储桶权限和AWS
配置( accessKeyId
、 secretAccessKey
和region
),因为这些都不存在于您的代码段中。
要进行测试,请转到您的 IAM 管理控制台并创建一个名为prefix-townhall-test
的新 IAM 用户,然后使用此授予对存储桶的访问权限的简单策略创建一个组:
{
"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/*"]
}
]
}
确保您创建的用户正在使用具有此策略的新组。
现在创建一个简单的测试脚本,就像在亚马逊上使用的一样:
HTML
<input id="file-chooser" type="file" />
<button id="upload-button">Upload</button>
<p id="results"></p>
代码(在 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);
某些浏览器(例如 Chrome)不支持localhost
或127.0.0.1
用于 CORS 请求。
尝试使用: http://lvh.me:5000/
: http://lvh.me:5000/
: http://lvh.me:5000/
有关更多信息,请参阅https://stackoverflow.com/a/10892392/1464716 。
尝试<AllowedOrigin>*</AllowedOrigin>
,没有协议。
如果它没有效果——你可能在客户端有问题。
您是否尝试过指定您的来源而不是使用通配符。 我很确定我们过去也遇到过类似的问题。
<?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>
当前的答案已经过时了。 所以这里是我的分享:
首先,您需要在 AWS S3 存储桶上设置 CORS
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"PUT",
"POST",
"DELETE",
"HEAD"
],
"AllowedOrigins": [
"http://*",
"https://*"
],
"ExposeHeaders": [
"Access-Control-Allow-Origin",
"ETag"
],
"MaxAgeSeconds": 3000
}
]
只是关于 S3 的 cors 的注释。 应用策略时,存储桶中已有的文件不会更新。 因此,请确保仅将 CORS 策略应用于新存储桶,或在应用策略后重新添加内容。 旧内容不会受到新 CORS 政策的影响
亚马逊 S3 如何评估 CORS?
对于最后一步,您还需要清除浏览器上的缓存,因为浏览器可能会缓存以前的飞行前请求
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.