AWS 403 forbidden & CORS block. Configuration for: Lambda, S3, & CORS settings for Pre-signed URL uploads to s3 bucket

Question

Apologies for the clutter, I'm new to asking questions here.

I have an aws Lambda function, s3 bucket, & Cognito setup. I am struggling with configuration of these services to allow a file upload to a s3 bucket.

Setup & path: (Working)

• Html/Js website: Authenticates user with Cognito, then requests pre-signed urls from lambda function for file upload.
• Lambda function: Generates pre-signed urls for s3 bucket and returns back to html/js. Code to generate urls below:

s3_client = boto3.client('s3', region_name='us-east-1',
config=botocore.client.Config(signature_version='s3v4'))
response = s3_client.generate_presigned_url("put_object",
Params={'Bucket': bucket_name,'Key': object_key},
ExpiresIn=expiration)

(Error)

• Html/Js: Attempts to use pre-signed url to upload file. This is where I am getting most errors. Everything from forbidden errors to CORS block errors. I've tried many solutions online such as 'no-cors' in fetch requests, disabling CORS on the Lambda, and many s3 permissions/policies. Code below:

  fetch(lambdaUrl, {method: "POST",
  body: encodedPayload, //authentication info, username, password
  //mode: "no-cors",
  headers: {
  "Origin": "*" // there is an https:// origin here
  }
  })
  .then(response => response.json())
  .then(jsonResponse => {
  console.log(jsonResponse.url)
  console.log(jsonResponse) //pre-signed url is here, but accessing here or from a simple curl line shows forbidden/error

  if (jsonResponse.url) {
  const kmlFile = JSON.parse(JSON.stringify(myReader.result)) //kml file from reader

  fetch(jsonResponse.url, {
  method: "POST",//"PUT",
  //mode: "no-cors",
  body: myReader.result //kml file
  }) .then(uploadResponse => {
  if (uploadResponse.ok) {
  console.log("KML file uploaded successfully.");
  else {
  console.error("Failed to upload KML file.");
  }
  })
  .catch(error => {
  console.error("Error during KML file upload:", error);
  });
  else {
  console.error("URL not found in the response.");
  }
  })
  .catch(error => {
  console.error("Error during POST request:", error);
  });

There are a lot of settings through Cognito, the Lambda function, s3 policies, etc. I am confused why I am getting these errors when attempting to use the pre-signed url from the html/js origin to the s3 bucket. I appreciate any help!

I've tried adding the 'no-cors' option on my fetch function, to avoid the CORS errors, but resulted in a 403 forbidden. I've tried enabling and disabling CORS on my Lambda function, as well as putting the s3 bucket settings to basically public access.

Answer 1

Turns out I just needed to have 'method: "PUT",' instead of 'method: "POST",' because my pre-signed urls were created allowing "put_object"