Coors error when trying to locate images to a s3 bucket from a react app

Question

I'm trying to locate images in S3 from a react app but my Cross-Origin Request is Blocked, here is the Coors configuration for my bucked and my component for uploading images:

 [ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "PUT", "POST", "DELETE", "GET" ], "AllowedOrigins": [ "*" ], "ExposeHeaders": [] }] import { useRef } from 'react' import S3 from 'react-aws-s3' const config = { bucketName: '...',//here a replace ... with my info dirName: 'photos', region: 'us-east-1', accessKeyId: '...', secretAccessKey: '...' } export let UploadPhoto = () => { const file = useRef() return ( <form onSubmit={(e) => { handleSubmmit(e, file.current.files[0]) }}> <h2>Upload a picture</h2> <input type="file" ref={file} /> <input type="submit" /> </form>) } const handleSubmmit = (e, file) => { e.preventDefault() const reactS3Client = new S3(config) reactS3Client.uploadFile(file, "test1"). then((data) => { console.log(data) }). catch((err)=> { console.log(err) }) }

I know I shouldn't allow requests from every origin (*) but I believe this should work. I believe the error must be in my bucked configuration but I copied from the amazon examples.

Answer 1

This is a wrong and dangerous way of uploading files to S3. You don't want to put your access keys out there for the whole world to see them.

Proper way of uploading to S3 bucket from a fronted/client is to use an authenticated PUT or POST. That can be achieved with S3 presigned URLs . Switching to it will also resolve you current CORS issues.

Best, Stefan