How to upload file to amazon s3 bucket using axios?

Question

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.

The error I get is the following: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at 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 } 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 (
        
            Images Component
            
        

    )
}

}

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



  
 AccessForbiddenCORSResponse: 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.PUTOBJECT4282B87BA935EF9AjWOwOQ/7BCzvw1xPmJroOzUBhbCmpfGx5HCPaPUvMoYTFMrlhoG5wN902B1brZ5cjYnKHMLWmpQ=

user_14186089 · Answer

For those who are facing this issue while uploading files from front end, Go to AWS S3 -> select your bucket -> permission tab -> scroll to last

Under section Cross-origin resource sharing (CORS), edit and drop your configuration

[
    {
        "AllowedHeaders": [
            "Authorization",
            "Content-Range",
            "Accept",
            "Content-Type",
            "Origin",
            "Range",
            "Access-Control-Allow-Origin"
        ],
        "AllowedMethods": [
            "GET",
            "PUT"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "Content-Range",
            "Content-Length",
            "ETag"
        ],
        "MaxAgeSeconds": 3000
    }
]

You can edit this as per your requirements.

Finally, Publish/Save it.

This will resolve your CORS issue.

How to upload file to amazon s3 bucket using axios?

2 Answers