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

Post a Comment

Popular posts from this blog

python Tkinter Capturing keyboard events save as one single string -

is possible store keyboard events 1 string? code below stores 1 char , prints it. card reader or bar code reader, contains collection of character/ string not 1 character @ time. goal save char pressed text variable. from tkinter import * root = tk() def key(event): text= event.char text+= event.char print ("pressed", text) def callback(event): frame.focus_set() print ("clicked at", event.x, event.y) frame = frame(root, width=100, height=100) frame.bind("<key>", key) frame.bind("<button-1>", callback) frame.pack() root.mainloop() currently, creating text variable , everytime key() function gets called, , text stores last character typed. you can define text module level variable , , use module level text inside key function - text = '' def key(event): global text text+= event.char print("pressed", text)
Read more

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

i'm implementing inapp billing in android app. works well, however, i'm trying decouple broadcast receiver activity manifest. suggestion in android's trivialdrive sample: // important: dynamically register broadcast messages updated purchases. // register receiver here instead of <receiver> in manifest // because call getpurchases() @ startup, therefore can ignore // broadcasts sent while app isn't running. // note: registering listener in activity bad idea, done here // because sample. regardless, receiver must registered after // iabhelper setup, before first call getpurchases(). currently there's class extends broadcastreceiver : public class iabbroadcastreceiver extends broadcastreceiver { /** * intent action receiver should filter for. */ public static final string action = "com.android.vending.billing.purchases_updated"; private final iabbroadcastlistener mlistener; public iabbroadcastreceiver(iabbroadcastlistener listener) { m
Read more

javascript - Z-index in d3.js -

i have map , when hover effect on region of map below yellow line , circle, last ones disappear. how can solve problem? http://jsfiddle.net/ot21n9qx/ var arc = g.append("path") .style("fill", "none") .style("stroke", "yellow") .style("stroke-width", 2) .attr("d", "m" + pathorigin[0] + "," + pathorigin[1] + " q" + svgpoint[0] + "," + pathorigin[1] + " " + svgpoint[0] + "," + svgpoint[1]); var circlesize = d3.scale.linear() .domain([0, 0.5, 1]) .range([4, 10, 4]); svg not have z order draws objects in order created. need create path , circle after create highlight regions. here forked fiddle: http://jsfiddle.net/o00fzgaf/1/
Read more