AWS API Gateway with Angular

Question

Has anyone gotten the AWS API Gateway to work with an Angular.js front-end? I have a lambda function that\'s exposed via a POST method in the API Gateway. I set up the hea

Answer 1

Since your error says "No 'Access-Control-Allow-Origin' header is present on the requested resource." it sounds like when you try to call the API from Angular it's not getting the Access-Control-Allow-Origin header that was setup when you followed the Amazon docs.

First, I would double-check that you're calling the right URL for the API. Amazon displays this in the stages screen but you have to append the stage name to the URL they show you. So if you deployed to the "prod" stage and they display

https://xyz.execute-api.us-west-2.amazonaws.com/my-api

You need to call

https://xyz.execute-api.us-west-2.amazonaws.com/my-api/prod

Next, I would try calling the OPTIONS method on your API from postman. After changing the POST method to OPTIONS and calling the API, check the header's in Postman's results section. You want to see the following in there:

Access-Control-Allow-Methods → POST,OPTIONS
Access-Control-Allow-Origin → *

If you aren't able to see those in the response, double check the Method Response under the OPTIONS method in your API. Make sure that those headers added for the 200 response.

As a last result you can try using the "Enable CORS" button that Amazon recently added. Select your resource in the left-hand tree view and look for the "Enable CORS" button on the top right-hand side. Click that and AWS will re-create all the CORS related methods.

I hope some of these steps help!