AWS API Gateway with Angular

Question

Has anyone got the AWS API Gateway to work with the Angular.js interface? I have a lambda function that is displayed through the POST method in the API gateway. I created the headers as indicated in this document: http://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html

I tested it in Postman and it works great. I did not need anything special, but when I make a call to $http.post() , I get only the No 'Access-Control-Allow-Origin' header that is present on the requested resource. Therefore, the original http://localhost:9000 not allowed. The response was HTTP status code 500. as a response.

Answer 1

The Api Gateway team is here.

Hopefully by now you have checked out the new Enable CORS feature in the console. Even if your Dev workflow is outside the console, you can quickly configure the test API and see the header configurations that the console sets up for you, and then copy them to your Swagger def or any other solution that you come up with.

Documentation guidance should still apply anyway. You will need 3 headers: Access-Control-Allow-Methods, Access-Control-Allow-Origin and Access-Control-Allow-Headers. The values ​​of these parameters will depend on your API.

If you want to send me the API resource that you are trying to call, I can take a look from our side.

Answer 2

I currently have a POST function that works through the Gateway and Lambda APIs, which are accessed from the Angular client with CORS. Although I do not know what your configuration is, I can share all of my relevant settings in the hope that you might find something that you missed. Enabling CORS at the moment is pretty painful (and hopefully something Amazon is working on a fix), requiring a lot of small steps in many areas with pretty bad documents.

I have 2 methods (OPTIONS and POST) for my resource, and I will share the corresponding settings for each:

POST:
Method request: nothing special. In the case of my endpoint, I have an option in the "Request paths" section for one of the route parameters. I do not use a query string, so the Query String URL is empty. HTTP request headers are also empty.

Integration Request:
Integration type: Lambda Matching patterns: I have one (application / json) with a template for transferring the corresponding values ​​from the request body and route parameters to my lambda function.

Method Answer:
Expand the status code field 200. Add a title for "Access-Control-Allow-Origin" and click the checkmark button to save it. You may need to do this for any other status codes you may have.

Integration answer:
Expand the response field 200. In the "Header Headers" section, change the display value to "*". Single quotes are required. You may need to do this for any other integration answers you may have.

OPTIONS:
Method Request:
Nothing special like the POST method.

Integration Request:
I decided to set up the integration process. According to Amazon, this does not matter, so I just decided that he was taunting, because all we really need to do is answer 200 with the appropriate headings. No matching patterns.

Method Answer:
Expand the status code field 200. Add the following 3 response headers and save them using the checkbox: Access-Control-Allow-Headers , Access-Control-Allow-Methods , Access-Control -Allow-Origin . There are no other status codes.

Integration answer:
Expand the response field 200. The regex is empty (set by default), and this method only has a 200 response. Expand the header mappings and set the headers to the following values:

 Access-Control-Allow-Headers: 'Content-Type,X-Amz-Date,Authorization,X-Requested-With' Access-Control-Allow-Methods: 'GET,POST,OPTIONS' Access-Control-Allow-Origin: '*' 

No matching patterns.

Then expand your API. Hopefully now it resolves CORS requests. I ran into the same problem as you, and I am sure that the problem in X-Requested-With is not listed in Access-Control-Allow-Headers.

Answer 3

Since your error says that the “No” header of Access-Control-Allow-Origin is present on the requested resource. ”This sounds when you try to call the API from Angular without getting the Access-Control-Allow-Origin header that was configured, when you followed Amazon docs.

First, I would double check that you are calling the correct URL for the API. Amazon displays this on the scene screen, but you must add the scene name to the URL that they show. Therefore, 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 

Then I will try to call the OPTIONS method on your API from the postman. After changing the POST method to OPTIONS and calling the API, check the header in the results section of Postman messages. You want to see the following:

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

If you cannot see the answer in the answer, double check the Response method according to the OPTIONS method in your API. Make sure these headers are added for 200 response.

As a final result, you can try using the "Enable CORS" button recently added by Amazon. Select your resource in the left tree view and find the "Enable CORS" button in the upper right. Click this, and AWS re-creates all CORS-related methods.

I hope some of these steps help!

Answer 4

You can enable the Enable CORS feature in the AWS API Gateway. Log in to your AWS account and go to the Gateway API. Select a resource in the Resources section and select Enable CORS from the action drop-down menu. This will enable CORS for all methods on the resource. Please check the link below for details.

https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html

Answer 5

TL; DR; This is not a CORS problem, the problem comes from the API gateway, check the problem with your API handler on the API gateway. Make sure your API can work with Postman before using it inside your user interface.

You can follow this guide like CORS . But it looks like you have already done this action.

Let's talk about CORS first: this is a mechanism that will help you protect your customers when they use your web application, letting you customize the response headers so that:

• Other hosts may access the resources of your web application. For example: Access-Control-Allow-Origin: abc.com when you return a response with this header. This will allow requests from the host abc.com .
• Limit specific HTTP methods. For example: Access-Control-Allow-Methods: GET, PUT , allow the source access to resources only using the GET or PUT method, do not allow POST, DELETE or any other methods.
• Only allowed queries have headers that match your given list. Access-Control-Allow-Headers: Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token , some of these headers are defined by Amazon, you can actually specify your own headers ,

You should consider setting a value for these attributes. In my opinion, just use * ( Access-Control-Allow-Origin: * ) when developing and change the value to a specific domain or wildcard ( Access-Control-Allow-Origin: *.abc.com ) when publishing your API.

Here's how CORS works:

As you can see here, before your actual request was sent to the Gateway API, your browser sent an OPTIONS request to the Gateway API to make sure that your request is allowed to be sent to the Gateway API. If the OPTIONS request returns 200, then your actual request will be sent to the Gateway API.

1. If your OPTIONS request failed. Then your request cannot be sent to the Gateway API. And in the Developer Tools, you'll see something like No 'Access-Control-Allow-Origin' is present on the requested resource... no, but there are no more error messages. The request will return status 0 You must configure CORS.

2. Another case is the same as you explain to your question. Got an HTTP Status Code 500 and something about CORS. This is not a CORS problem, it is a browser problem, I think. In this case, OPTIONS requests a return status code of 200. Your actual request returns a status code of 500, which means your API is already broken. The browser still sends the message No 'Access-Control-Allow-Origin' is present on the requested resource... error. In this case, you must debug your API to see the problem.

Hope this helps!