Estoy tratando de cargar mi archivo a través de:
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); });Sin embargo, recibo el siguiente 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. con el error de procedimiento: 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"… }
Mi configuración de CORS se parece a la siguiente y probé un par de cosas sin suerte.
<?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>¿Alguien tiene alguna idea de lo que está mal? He mirado 5-6 publicaciones similares pero nadie parece ser capaz de resolver el problema.
Para cargar archivos a través del navegador, debe asegurarse de haber configurado CORS para su depósito de Amazon S3 y haber expuesto el encabezado "ETag" a través de la declaración de ETag.
Le sugiero que comience con una configuración de prueba abierta y luego la modifique según sus necesidades:
<?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> Luego verifique los permisos de su depósito y su configuración de AWS ( accessKeyId , secretAccessKey y region ), ya que ninguno de estos está presente en su fragmento.
Para realizar pruebas, vaya a su consola de administración de IAM y cree un nuevo usuario de IAM llamado prefix-townhall-test luego cree un grupo con esta política simple que otorga acceso a un depósito:
{ "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/*"] } ] }Asegúrese de que el usuario que creó esté usando el nuevo grupo con esta política.
Ahora cree un script de prueba simple como el que se usa en Amazon:
HTML
<input id="file-chooser" type="file" /> <button id="upload-button">Upload</button> <p id="results"></p>CÓDIGO (en DOM listo)
// 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);Algunos navegadores, como Chrome, no admiten localhost o 127.0.0.1 para solicitudes CORS.
Intenta usar en su lugar: http://lvh.me:5000/
Consulte https://stackoverflow.com/a/10892392/1464716 para obtener más información.
Pruebe <AllowedOrigin>*</AllowedOrigin> , sin protocolo.
Si no tiene efecto, probablemente tenga un problema en el lado del cliente.