title: How to upload file to amazon s3 bucket using axios?
body: <p>first of all, I am very very new to react. I am trying to upload a file to my amazon S3 bucket using axios.
  I get the signature url correctly but I don't know how to continue.. I tried this but it doesn't work.</p>
  
  <p>The error I get is the following: 
  Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at <a href="https://xxx.s3.amazonaws.com/wolves.jpeg?AWSAccessKeyId=xxxxxxxxxx&amp;Content-Type=image%2Fjpeg&amp;Expires=1502773987&amp;Signature=ZXQya8d3xZoikzX6dIbdL3Bvb8A%3D" rel="nofollow noreferrer">https://xxx.s3.amazonaws.com/wolves.jpeg?AWSAccessKeyId=xxxxxxxxxx&amp;Content-Type=image%2Fjpeg&amp;Expires=1502773987&amp;Signature=ZXQya8d3xZoikzX6dIbdL3Bvb8A%3D</a>. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).</p>
  
  <pre><code>import React, { Component } from 'react'
  import Dropzone from 'react-dropzone'
  import aws from 'aws-sdk'
  import axios from '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 (
          &lt;div&gt;
              Images Component
              &lt;Dropzone onDrop={this.uploadFile.bind(this)} /&gt;
          &lt;/div&gt;
  
      )
  }
  </code></pre>
  
  <p>}</p>
  
  <pre><code>OPTIONS https://xxbucket.s3.amazonaws.com/wolves.jpeg?
  AWSAccessKeyId=xxxxxxxxxxxxxxxxxx&amp;Content-Type=image%2Fjpeg&amp;Expires=1502894764&amp;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
  
  
  
    &lt;?xml version="1.0" encoding="UTF-8"?&gt;
   &lt;Error&gt;&lt;Code&gt;AccessForbidden&lt;/Code&gt;&lt;Message&gt;CORSResponse: This CORS request is not allowed. This is usually because the evalution of Origin, request method / Access-Control-Request-Method or Access-Control-Request-Headers are not whitelisted by the resource's CORS spec.&lt;/Message&gt;&lt;Method&gt;PUT&lt;/Method&gt;&lt;ResourceType&gt;OBJECT&lt;/ResourceType&gt;&lt;RequestId&gt;4282B87BA935EF9A&lt;/RequestId&gt;&lt;HostId&gt;jWOwOQ/7BCzvw1xPmJroOzUBhbCmpfGx5HCPaPUvMoYTFMrlhoG5wN902B1brZ5cjYnKHMLWmpQ=&lt;/HostId&gt;&lt;/Error&gt;
  </code></pre>