AWS API Gateway - Handling CORS errors

 

AWS API Gateway Console provides a simple mechanism to enable CORS and handle Cross-Origin browser requests to REST Apis/ Services. You may select any "resource" in the API Management console and select "Enable CORS" from the "Actions" Dropdown.

 

You may expect this feature would be simple click and forget solution but you might still encounter CORS issues when you make API request calls from your favourite UI frameworks such as React, Angular, Vue and even plain vanilla javascript.

You may end up tinkering your backend service irrespective of the technology used; Lambda (AWS), Springboot (Java), Flask, Express (nodejs) ...never ending list of REST API platforms. Either you end up lucky solving the issue or left searching for answers.

You might encounter errors such as -

Origin http://[yourdomain].com is not allowed by Access-Control-Allow-Origin. 

Origin http://localhost:4200 is not allowed by Access-Control-Allow-Origin. 

Reason: CORS header 'Access-Control-Allow-Origin' missing

Let us try this solution:

Select the method under the resource for which API integration is configured, be it, GET, POST, PUT, DELETE or ANY.

Select "Method Response" and add header "Access-Control-Allow-Origin" as shown in the below image. 

If you notice there is an "OPTIONS" method added for the selected resource. If you select this resource it shows that the required headers are already added.  But we still get CORS issue in certain cases. This is when, you may have to manually add the header. 

After the adding the header "Access-Control-Allow-Origin" manually, we have to move to "Integration Response" section of your API configuration.

Expand the "Header Mappings" section select the pencil icon for edit.

In the "Mapping Value" text field add '*' or any other custom domain instead of *.

Save changes and make sure you "Deploy API" from the actions menu before you test the changes.