I was reading the book Full Stack Serverless which gives you an introduction how you can use Amplify to develop apps. It's composed of multiple chapters which, thru code examples, explains to you how to use certain AWS services thru Amplify. Few of these services are Lambda, S3, DynamoDB, Api Gateway, ecc. One of the example was simple web shop which allows you to manage articles using insert, delete, list operations. Front end is developed with React with few components, while backend is Lambda function called thru Api Gateway. Products are saved in DynamoDB, AWS nosql database. When I finished with typing this example from the book (all code is also downloadable from github but I wanted to type it to become more familiar) I started app to see how it work. And it didn’t. Didn’t work. I got screen full of errors but the first one was this one:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://xxxxxxx.execute-api.us-east-1.amazonaws.com/dev/products. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
My conclusion was that CORS headers are missing so I searched in the code to see where to insert this piece. Lambda function was build on as NodeJS Express web framework. In this way single function can answer on different https calls like POST, GET, DELETE, ecc. It was exposed thru API Gateway so my first idea was that there is a problem and I need to find a way to enable CORS on APIGW. After some time I found that APIGW doesn’t limit calls with CORS protection because it was, by default, disabled. I continued to search and I found one discussion on stackoverflow (otherwise where else? :) ) where similar problem was described.
My headers looked like this:
"Access-Control-Allow-Origin", "*"
"Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"
And this line was missing:
"Access-Control-Allow-Methods","OPTIONS,POST,GET,PUT,DELETE"
so I added it but without success.
Then, reading again and again this thread I started to suspect that Lambda function wasn’t even invoked and that http call was stopped at the beginning, at API Gateway. I went to Lambda settings and found out there were recent invocations so calls were able to reach Lambda function. After that I check logs on CloudWatch and BANG!!!* there were some code errors (typo errors). Practically Lambda invocations generated error but these errors were represented as CORS malfunction and not compile errors. When I fixed these errors http call received correct response from the Lambda.
All the debugging and bug searching time I was convinced that CORS was the problem. I'm aware it is not an scientific discovery but I invested few days (on my free time) searching the problem on the wrong place and I hope it will spare someone else to going thru the same.
Top comments (0)