CORS Error accessing Lambda function from S3-hosted website

Question

This is a duplicate question, in the sense that it is about an issue I've read about in plenty of other stackoverflow posts already. However, none of the solutions I found seem to work for my particular configuration, which is why I wanted to ask again with my own details.

I have set up an S3 bucket, containing my html/javascript for my website. I made this bucket open for all to see, and added the following CORS policies on it:

[ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "GET", "POST", "OPTIONS" ], "AllowedOrigins": [ "*" ], "ExposeHeaders": [] } ]

The core of my service's functionality, however, lies in a Lambda function (which internally communicates with DynamoDB). To access this Lambda function from my S3-hosted website, I also added an API gateway.

Firstly, I added the following in my Lambda request handling:

const headers = { 'Content-Type': 'application/json', 'Access-Control-Allow-Headers': 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token', 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'OPTIONS,POST,GET', };

The headers are later returned as part of the request result.

My API Gateway is quite simple, and is just composed of one single URL, configured as follows:

Furthermore, I enabled CORS on this API Gateway like so:

When I click on "Stages", some other request methods appear as well, but I don't think they are enabled/matter:

So, basically, I have enabled CORS on 3 different points: On my S3 bucket, in my Lambda code, and on the API Gateway. Yet, when I try to access my Lambda function by sending a POST-Request to my API Gateway from the website on my bucket, I get the following error: Access to XMLHttpRequest at 'https://----.execute-api.eu-west-3.amazonaws.com/default/----' from origin 'http://------.s3-website.eu-west-3.amazonaws.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

And, well, I simply don't know how to continue. I've read the CORS Docs of AWS, and I've scrolled Stackoverflow extensively, yet I don't seem to be able to reproduce a working environment myself...

I'd read, or re-read, the API Gateway CORS troubleshooting guide and Enabling CORS for a REST API resource. — jarmod
– jarmod, Commented Oct 1, 2021 at 23:18
@jarmod I did, and I still can't figure it out. Not sure if I'm missing something obvious or am just dumb, but I guess that's why I created this post, because I ust can't figure out what isn't working — Fly
– Fly, Commented Oct 1, 2021 at 23:28
Where are you seeing the cors error? In the developer console? You can also get a cors error if your function bugs out before returning an http response - put a try/catch block around your code and then change the response code to 500 in the catch, see if that changes your error. — Mrk Fldig
– Mrk Fldig, Commented Oct 2, 2021 at 9:16

Ruben · Accepted Answer · 2021-10-02 06:20:35Z

try sending the CORS header as a response from your lambda function. It could be possible reason why you're getting this error.

exports.handler = async (event) => { const response = { statusCode: 200, headers: { "Access-Control-Allow-Headers" : "Content-Type", "Access-Control-Allow-Origin": "https://www.example.com", "Access-Control-Allow-Methods": "OPTIONS,POST,GET" }, body: JSON.stringify('Hello from Lambda!'), }; return response; };

Refer here

Collectives™ on Stack Overflow

CORS Error accessing Lambda function from S3-hosted website

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related