CORS error uploading file to S3 using mapbox credentials

Question

I am trying to upload a shapefile from my frontend to the temporary bucket provided by mapbox like so:

async function upload() {

    const credentials = await getCredentials(USERNAME, SECRET_KEY); // gets temporary mapbox credentials

    const s3Client = new S3Client({
        region: 'us-east-1',
        credentials: {
            accessKeyId: credentials.accessKeyId,
            secretAccessKey: credentials.secretAccessKey,
            sessionToken: credentials.sessionToken
        },
        requestHandler: new XhrHttpHandler({})
    });

    const file = document.querySelector('input[type="file"]').files;

    try {

        const data = await s3Client.send(new PutObjectCommand({
            Bucket: credentials.bucket,
            Key: credentials.key,
            Body: file[0]
        }))

        console.log(data);
    } catch(e) {
        console.log(e);
    }
}

I keep getting the following CORS error:

Access to XMLHttpRequest at 'https://tilestream-tilesets-production.s3.us-east-1.amazonaws.com/12/_pending/BUCKET/USERNAME?x-id=PutObject' from origin 'https://localhost:1234' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I don't have any control over the AWS account to modify CORS settings, so I'm not really sure what to do here. Everything online says that I need to modify my bucket settings, however this is not possible.

I had this but it may be different for your particular case. In my case it was meant to be a Simple Request which doesn't need a CORS preflight. I was sending a header that wasn't allowed. Can you check what headers are being sent and if they comply with this? (scroll down to the Simple Requests section) https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS — Adam, Sep 07 '22 at 17:04
Well, I'm calling a PUT request so it needs to send the preflight. — justanotherguy, Sep 07 '22 at 17:18
These are the headers the request is sending: https://prnt.sc/nYS8FmtZIEYc — justanotherguy, Sep 07 '22 at 17:25

score -1 · Answer 1 · answered Sep 09 '22 at 16:05

I ended up moving this code to the backend server using express and nodejs. I wrapped my express app with the cors middleware and that seems to have solved the issue. if anyone finds a solution for the frontend I would love to know how to get around the cors issue.

CORS error uploading file to S3 using mapbox credentials

1 Answers1