reactjs - How to upload file to amazon s3 bucket using axios? -


first of all, very new react. trying upload file amazon s3 bucket using axios. signature url correctly don't know how continue.. tried doesn't work.

the error following: cross-origin request blocked: same origin policy disallows reading remote resource @ https://xxx.s3.amazonaws.com/wolves.jpeg?awsaccesskeyid=xxxxxxxxxx&content-type=image%2fjpeg&expires=1502773987&signature=zxqya8d3xzoikzx6dibdl3bvb8a%3d. (reason: cors header ‘access-control-allow-origin’ missing).

import react, { component } 'react' import dropzone 'react-dropzone' import aws 'aws-sdk' import axios 'axios'  export default class imageaws extends component{      uploadfile(files){          console.log('uploadfile: ')         const file = files[0]          aws.config.update({             accesskeyid: 'xxxxxxxxx',             secretaccesskey: 'xxxxxxxx'         });          var s3 = new aws.s3();          var params = {         bucket: 'xxx',         key: file.name,         expires: 60,         contenttype: file.type     };      s3.getsignedurl('putobject', params, function(err, signedurl) {         if (err) {             console.log(err);             return err;         } else {             console.log(signedurl);              var instance = axios.create();              instance.put(signedurl, file, {headers: {'content-type': file.type}})                 .then(function (result) {                     console.log(result);                 })                 .catch(function (err) {                     console.log(err);                 });             return signedurl;         }     });  }  render () {     return (         <div>             images component             <dropzone ondrop={this.uploadfile.bind(this)} />         </div>      ) } 

}

options https://xxbucket.s3.amazonaws.com/wolves.jpeg? awsaccesskeyid=xxxxxxxxxxxxxxxxxx&content-type=image%2fjpeg&expires=1502894764&signature=fqaccuimhyrlglbldvy%2fkyx2xmc%3d http/1.1  host: xxbucket.s3.amazonaws.com  user-agent: mozilla/5.0 (x11; ubuntu; linux x86_64; rv:54.0) gecko/20100101  firefox/54.0  accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8  accept-language: en-us,en;q=0.5  accept-encoding: gzip, deflate, br  access-control-request-method: put  access-control-request-headers: access-control-allow-headers,access-control-allow-methods,access-control-allow-origin  origin: http://localhost:8080  connection: keep-alive      http/1.1 403 forbidden  x-amz-request-id: 4282b87ba935ef9a  x-amz-id-2: jwowoq/7bczvw1xpmjroozubhbcmpfgx5hcpapuvmoytfmrlhog5wn902b1brz5cjynkhmlwmpq=  content-type: application/xml  date: wed, 16 aug 2017 14:45:05 gmt  server: amazons3  content-length: 514      <?xml version="1.0" encoding="utf-8"?>  <error><code>accessforbidden</code><message>corsresponse: cors request not allowed. because evalution of origin, request method / access-control-request-method or access-control-request-headers not whitelisted resource's cors spec.</message><method>put</method><resourcetype>object</resourcetype><requestid>4282b87ba935ef9a</requestid><hostid>jwowoq/7bczvw1xpmjroozubhbcmpfgx5hcpapuvmoytfmrlhog5wn902b1brz5cjynkhmlwmpq=</hostid></error> 

you'll need add required cors headers dev server. read cors. depending on development server, search proper way add response headers. then, add following headers every response:

"access-control-allow-origin": "*", "access-control-allow-methods": "get, post, put, delete, patch, options", "access-control-allow-headers": "x-requested-with, content-type, authorization" 

this enable request data other websites on web. make sure add them development version only(i assume learning, that's ok). on production, you'll need limit "access-control-allow-origin": "*", specific urls.

further reading:


Comments

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -