No 'Access-Control-Allow-Origin' header is present on the requested resource (AWS, API Gateway, S3, CORS)

Question

I'm trying to upload an image file on to my S3 bucket using API Gateway SDK. However I keep getting the following error:

Access to XMLHttpRequest at 'https://*****.execute-api.*****.amazonaws.com/dev/upload/photophotobucket/me.png' from origin 'http://photofront.s3-website-*****.amazonaws.com' 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.

Below is my javascript code that is initiated when clicking on upload:

var apigClient = apigClientFactory.newClient();

function UploadFile() {
    var filePath = document.getElementById('file_path').value //C:\fakepath\me.png
    var file = document.getElementById('file_path').files[0]
    var reader = new FileReader()
    document.getElementById('file_path').value = ""
    if ((filePath == "") || (!['png', 'jpg', 'jpeg'].includes(filePath.split(".")[1]))) {
      alert("WRONG FILE!! Please upload a valid PNG or JPG file")
    } else {
      var params = {
        bucket: 'photophotobucket',
        key: filePath.split("\\").slice(-1)[0], // "me.png"
        'Content-Type': file.type
      };
      var body = {}
      var additionalParams = {
        headers: {
          'x-api-key': 'MYAPIKEY',
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Methods': 'OPTIONS,PUT'
        },
        queryParams: {}
      };
      reader.onload = function (event) {
        body = btoa(event.target.result)
        console.log("body")
        console.log(body)
        var whatToReturn = apigClient.uploadBucketKeyPut(params, body, additionalParams)
          .then(function (result) {
          })
          .catch(function (error) {
          });
        return whatToReturn
      }
      reader.readAsBinaryString(file)
    }
  }

I have enabled CORS on my API Gateway for the PUT method. (Everything got check marked). I tried with and without the Access-Control-Allow headers, they both don't work. What am I missing?

On the API Gateway Console, I already set up "Response Headers for 200". I already do have Integration Response Header Mapping set up with '*'

If there are any other information that you need please ask.

Answer 1

The error message calls out that it's the Preflight request (aka, the Options method on your resource) that doesn't have the correct Access-Control-Allow-Origin settings. If you select the Options method and edit the Method Response > Response Headers, you should have Access-Control-Allow-Origin listed. The next step is setting a value for it. Edit the Integration Response > Header Mappings > Access-Control-Allow-Origin and set the value to '*' (with single quotes). This makes it wide open during your troubleshooting, and you can change the value later to be more specific like 'https://example.com' .

You may get subsequent errors after this step with the PUT method call saying the same thing. You can take these same steps for the Put Method (Adding Access-Control-Allow-Origin to the Method Response & and '*' to the Integration Response).