CORS Error While creating, listing S3 buckets

0

Enter image description here Where should I add CORS policy to get access to S3 resources. What I am trying to do is to create bucket and list buckets but I am unable to do that due to this CORS error. But I am able to access objects inside the buckets whichever name I mention explicilty in the code But cant able to list all buckets and create a new bucket. I am using Angular . By the way I have given Admin access to the identity , so there shouldnt be any access restrictions.

2 Answers
1

Hi,

CORS allows the client browser to check with the third-party servers if the request is authorized before any data transfer. By default, browsers enforce that clients can only send requests to a resource with the same origin as the client's URL. Take a look at the following AWS page for more information.

Since your web application running in localhost domain is trying to interact with resources in s3.us-east-1.amazonaws.com, you need to configure CORS response headers on the S3 bucket (Access-Control-Allow-Methods, Access-Control-Allow-Headers and Access-Control-Allow-Origin), so that your application can consume it.

Below I attach some AWS pages that describes how to configure it step by step.

profile picture
EXPERT
answered 4 months ago
profile picture
EXPERT
reviewed 4 months ago
  • async s3ListBucketsCommand() {
        try {
          const creds = await this.auth.getAWSAccess();
          const config = {
            region: environment.awsCognito.region,
            credentials: {
              accessKeyId: creds.accessKeyId,
              secretAccessKey: creds.secretAccessKey,
              sessionToken: creds.sessionToken,
            },
          };
      
          const client = new S3Client(config);
          const input = {
            Bucket: "random-bucket-i-want-to-create",
          };
          const command = new CreateBucketCommand(input);
          const response = await client.send(command);
          
          // Handle the response as needed
          console.log(response);
        } catch (error) {
          // Handle errors
          console.error(error);
        }
      }
    
          const command = new CreateBucketCommand(input);
    

    As You can see this is the function that I wrote to create a bucket dynamically. When I am trying to do this I am getting CORS error. For the buckets that already existed in my S3 service I have set CORS policy to allow requests and thats working fine I am getting Objects inside of those Buckets. But How to create a bucket dynamically in angular without any CORS errors ?

  • Hi,

    According to following GitHub and StackOverflow issues, it is not possible to create a bucket from the browser using the AWS-SDK, since the S3 Service team still doesn't add CORS support for CreateBucket operation.

0
Accepted Answer
profile picture
EXPERT
answered 4 months ago

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions