title: No 'Access-Control-Allow-Origin' header is present on the requested resource (AWS, API Gateway, S3, CORS)
body: <p>I'm trying to upload an image file on to my S3 bucket using API Gateway SDK.
  However I keep getting the following error:</p>
  <pre><code>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.
  </code></pre>
  <p>Below is my javascript code that is initiated when clicking on upload:</p>
  <pre><code>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 = &quot;&quot;
      if ((filePath == &quot;&quot;) || (!['png', 'jpg', 'jpeg'].includes(filePath.split(&quot;.&quot;)[1]))) {
        alert(&quot;WRONG FILE!! Please upload a valid PNG or JPG file&quot;)
      } else {
        var params = {
          bucket: 'photophotobucket',
          key: filePath.split(&quot;\\&quot;).slice(-1)[0], // &quot;me.png&quot;
          '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(&quot;body&quot;)
          console.log(body)
          var whatToReturn = apigClient.uploadBucketKeyPut(params, body, additionalParams)
            .then(function (result) {
            })
            .catch(function (error) {
            });
          return whatToReturn
        }
        reader.readAsBinaryString(file)
      }
    }
  </code></pre>
  <p>I have enabled CORS on my API Gateway for the PUT method. (Everything got check marked).
  I tried with and without the <code>Access-Control-Allow</code> headers, they both don't work.
  What am I missing?</p>
  <p>On the API Gateway Console, I already set up &quot;Response Headers for 200&quot;. I already do have Integration Response Header Mapping set up with '*'</p>
  <p>If there are any other information that you need please ask.</p>