Skip to main content

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.







Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

Grails - cross-field Date validation

Often we run into domain classes with date fields. If the domain class has two datefields, startDate and endDate, and the rule for a valid combination is "endDate to be greater than startDate", how do we handle? I listed below two of the options, either using domain level constraints or using the domain classes. Option 1: Using domain constraints. Let us take a sample Grails Domain class class Student{ String name String school Date startDate Date endDate } Add the following constraints to enforce validation rules where name, school, startDate cannot be blank and endDate if present should be greater than startDate.
5 comments
Read more

Implementing advanced sort in Grails

The "list" pages generated by inbuilt scaffolding/template features of grails have pagination and sorting features. However, if the domain object displayed in the list is a nested object having another domain object as a property, you may notice that sort is not enabled for that field. Boiler plate code for the header of the list is shown below. As you would have noticed few columns have sortable columns automatically generated by Grails command, generate-all or generate-views. The properties 'partyAccount' and 'bankAccount' in this sample are domain classes nested in the domain class 'partyTransaction'. We could convert them to sortable columns by using the tag g:sortableColum...
2 comments
Read more

CCAvenue and Magento Integration

India based e-commerce portals have to consider CCAvenue Payment Gateway as one of option for its simplicity and reliability. Magento e-commerce platform has several ready to use payment gateway plugins and a rich set of API to enhance its functionality to add new payment gateways that are not provided as part of its standard release. For one the projects we have to integrate Magento with CCavaenue. We browsed several forums for a free and ready to use plugin without much luck. Though there is no mention of any such plugin on CCAvenue website, we just tried calling the CCAvenue help desk and immediately we got an integration toolkit with detailed steps for integration. It works like a charm.
8 comments
Read more