How to setup react-s3-uploader and fix the 403 error

While looking at react-s3-uploader’s npm documentation it seemed really cool and the fastest way to get the job done

so on the react side all we had to add was

<ReactS3Uploader
    className={'uploader'}
    signingUrl="/s3/sign"
    signingUrlMethod="GET"
    accept=".doc,.docx,.pdf"
    s3path="/uploads/"
    onProgress={this.onProgress}
    onError={this.onError}
    onFinish={this.onFinish}
    uploadRequestHeaders={{
    'x-amz-acl': 'public-read'
    }}
    ref={fileInput => (this.fileInput = fileInput)}
    contentDisposition="auto"
    />

and on the node side all we did was

app.use('/s3', require('react-s3-uploader/s3router')({
    bucket: "<bucket name>",
    ACL: 'private', // this is default
    uniquePrefix: true // (4.0.2 and above) default is true, setting the attribute to false preserves the original filename in S3
    }));

and boom time to upload the first file

So we clicked on the upload button the react component generated and wait for it wait for it

got a big giant 403

No documentation on react-s3-uploader github page about that and neither was it listed in issues

some research on AWS amplify showed that we needed bucket CORS configuration

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    </CORSRule>
    <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    </CORSRule>
</CORSConfiguration>

and voila our upload went through