Amazon S3的Javascript成为无'访问控制 - 允许 - 原产地“标头的请求的资源present原产地、访问控制、资源、Amazon
我试图通过上传我的文件：
的console.log（不破直到这里）;
scope.inputMemeIsFile =真;
VAR桶=新AWS.S3（{params：一个{斗：townhall.images'}}）;
文件= image.file;
的console.log（文件）;
VAR PARAMS = {关键：file.name，则contentType：file.type，身体：文件};
bucket.upload（PARAMS，功能（ERR，数据）{
VAR的结果=犯错？ '错误！' ：上传。;
执行console.log（结果）;
执行console.log（ERR）;
}）;
不过，我收到以下错误：
XMLHtt prequest无法加载https://s3.amazonaws.com/<BUCKETNAME>/favicon.jpg。没有访问控制 - 允许 - 原产地标头的请求的资源present。原产地http://127.0.0.1:5000，因此没有允许访问。
与proceedingError：网络故障{消息：网络故障，code：NetworkingError，时间：星期二2015年2月17号十三点37分06秒格林尼治标准时间0500（美国东部时间），区域：美东1，主机名：s3.amazonaws.com...... }
我的CORS的配置如下所示，我已经尝试了两件事情，没有运气。
＆LT; XML版本=1.0编码=UTF-8＆GT？;
＆LT; CORSConfiguration的xmlns =http://s3.amazonaws.com/doc/2006-03-01/＆GT;
＆LT; CORSRule＆GT;
＆LT; AllowedOrigin＆GT;的http：// *＆LT; / AllowedOrigin＆GT;
＆LT; AllowedOrigin＆GT;的https：// *＆LT; / AllowedOrigin＆GT;
＆LT; AllowedMethod＆GT; GET＆LT; / AllowedMethod＆GT;
＆LT; AllowedMethod＆GT; POST＆LT; / AllowedMethod＆GT;
＆LT; AllowedMethod＆GT; PUT＆LT; / AllowedMethod＆GT;
＆LT; AllowedHeader＆GT; *＆LT; / AllowedHeader＆GT;
＆LT; / CORSRule＆GT;
＆LT; / CORSConfiguration＆GT;
任何人有任何想法什么是错？我已经看了5-6类似的职位，但似乎没有人能解决这个问题。
解决方案为了上传文件，在浏览器中，你应该确保你已经配置CORS为您的Amazon S3存储和暴露通过ETag的声明的ETag头。
我会建议你开始以开放的测试配置，然后修改您的需求：
＆LT; XML版本=1.0编码=UTF-8＆GT？;
＆LT; CORSConfiguration的xmlns =http://s3.amazonaws.com/doc/2006-03-01/＆GT;
＆LT; CORSRule＆GT;
＆LT; AllowedOrigin＆GT; *＆LT; / AllowedOrigin＆GT;
＆其中; AllowedMethod＆GT; HEAD＆所述; / AllowedMethod＆GT;
＆LT; AllowedMethod＆GT; GET＆LT; / AllowedMethod＆GT;
＆LT; AllowedMethod＆GT; PUT＆LT; / AllowedMethod＆GT;
＆LT; AllowedMethod＆GT; POST＆LT; / AllowedMethod＆GT;
＆LT; AllowedMethod＆GT;删除＆LT; / AllowedMethod＆GT;
＆LT; AllowedHeader＆GT; *＆LT; / AllowedHeader＆GT;
＆LT; ExposeHeader＆GT;的ETag＆LT; / ExposeHeader＆GT;
＆LT; / CORSRule＆GT;
＆LT; / CORSConfiguration＆GT;
然后检查你的水桶权限和你的 AWS 配置（ accessKeyId ， secretAccessKey 和区域），因为这些都不是present在你的代码片段。
有关测试，去你的IAM管理控制台，并创建一个新的IAM用户名为 preFIX-市政厅测试然后用这个简单的策略创建组赠款访问斗：
{
版本：2012年10月17日，
声明： [
{
效果：允许，
行动：S3：ListBucket]，
资源：ARN：AWS：S3 :::测试斗名]
}，
{
效果：允许，
行动： [
S3：PutObject
S3：GetObject的，
S3：DeleteObject
]
资源：ARN：AWS：S3 :::测试桶名称/ *]
}
]
}
请确保您创建使用新的组此政策。用户
现在创建像亚马逊这样用一个简单的测试脚本：
HTML
＆LT;输入ID =文件选择类型=文件/＆GT;
＆LT;按钮ID =上传按钮＆GT;上传＆LT; /按钮＆GT;
＆其中，P ID =结果 - GT;＆LT; / P＆GT;
code（DOM的准备）
//更新凭据
VAR凭证= {accessKeyId：新accessKeyId，secretAccessKey：新secretAccessKey'};
AWS.config.update（凭证）;
AWS.config.region ='美西1';
//创建桶实例
VAR桶=新AWS.S3（{params：一个{斗：测试斗名'}}）;
VAR文件选择器=的document.getElementById（'文件选择）;
VAR键=的document.getElementById（'上传按钮'）;
VAR的结果=的document.getElementById（'结果'）;
button.addEventListener（'点击'，函数（）{
var文件= fileChooser.files [0];
如果（文件）{
results.innerHTML ='';
VAR PARAMS = {关键：file.name，则contentType：file.type，身体：文件};
bucket.upload（PARAMS，功能（ERR，数据）{
results.innerHTML =犯错？ '错误！' ：上传。;
}）;
} 其他 {
results.innerHTML ='没有上传。;
}
}， 假）;
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"…}
My CORS config looks like the following and I have tried a couple things with no luck.
<?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.
解决方案In order to upload files in the browser, you should ensure that you have configured CORS for your Amazon S3 bucket and exposed the "ETag" header via the ETag declaration.
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 AWS configuration (accessKeyId, secretAccessKey, and region) since none of these are present in your snippet.
For testing, go to your IAM Management Console and create a new IAM user named prefix-townhall-test then create a group with this simple policy that grants access to a bucket:
{
"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
<input id="file-chooser" type="file" />
<button id="upload-button">Upload</button>
<p id="results"></p>
CODE (on DOM ready)
// 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);
