S3 Lambda API Error - not allowed by Access-Control-Allow-Origin

Question

I have a Lambda Function that returns text from a script, I set up an API to get the data using a GET Request and deployed it for testing.

When I click on test API I get my results successfully.

I have this code in my index.html

function myFunction() {
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function(e) {
                    console.log(e)
                    if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("my-demo").innerHTML = this.responseText;
                    }
                };
                xhttp.open("GET", "[link to get API]", true);
                xhttp.send();

            }

On my S3, the file is public and my CORS is

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedOrigin>http://*</AllowedOrigin>
    <AllowedOrigin>https://*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

The webpage loads, although I keep getting these errors

[Error] Origin https://s3.amazonaws.com is not allowed by Access-Control-Allow-Origin.
[Error] Failed to load resource: Origin https://s3.amazonaws.com is not allowed by Access-Control-Allow-Origin. (myServerlessWebpage, line 0)
[Error] XMLHttpRequest cannot load [myapiwebsite] due to access control checks.

Answer 1

I've encountered the same issue and find out that I can "fix" this behavior by proxying my requests through my server.

So in front I make request to express server and then on the server side make request to AWS API.
For example with node-fetch module for requests:

//front
var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function(e) {
                console.log(e)
                if (this.readyState == 4 && this.status == 200) {
                document.getElementById("my-demo").innerHTML = this.responseText;
                }
            };
            xhttp.open("GET", "[link to get your server]", true);
            xhttp.send();


// backend 
var fetch = require('node-fetch'):
// your server code here....

app.get('/[link to get your server]', async (request, response) => {
  // parse data from request and 
  var apiRequest = await fetch([link to get API]);
  var result = await fetch.json();
  // send result from AWS api to front.
  res.send(result);
})

So, the solution is to proxy your AWS API request through your server.

Also, you can find this article extremely helpful and maybe find another solution for your problem.