API Gateway frontend for Lambda - CORS issue

Question

I have a APIGateway setup in front of my Lambda function.  I have done this twice before, and they both work.  However this time I keep getting a CORS error in the browser dev tools view.   I've run the 'test' function within the APIGateway and it works and shows that the Access-Control-Allow-Origin header is present... I'm not sure what this could be.  I've compared this to the other two that work several times and I can't find any difference.

Interesting to note, if I have the .HTML on my local computer and open it in the browser, the page opens and the API loads with no problem!  However, once I upload the HTML file to S3, and hit it via my URL, the page won't load the API and dev tools lists the error: **....has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.**

Riku_Kobayashi · Answer

Hello.

Have you configured API Gateway to return CORS headers in responses as described in the documentation below?  
Also, is the "Access-Control-Allow-Origin" header configured to allow access from S3?  
Does the Lambda function also include "Access-Control-Allow-Origin" in the response header?  
https://repost.aws/knowledge-center/api-gateway-cors-errors

Whether or not to set the "Access-Control-Allow-Origin" header in the Lambda response depends on whether you are using "Lambda proxy integration" or not.  
I recommend reading the following documentation for more information.  
https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html#apigateway-enable-cors-proxy

API Gateway frontend for Lambda - CORS issue

Relevant content