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:

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

Grails - Querying complex associations

Criteria class allows performing complex searches on grails objects. There are number of shortcut methods for performing queries but these methods have limitations in terms of number of conditions used in "where clauses". Traditional sql "joins" are not possible as shown in some of the Grails "Finder" methods shown below. Sample 1: def list = AccountTransaction.findAllByCompanyCodeAndVoucherDateBetween(branch, fromDate, toDate, params) Sample 2: def list = AccountTransaction.findAllByCompanyCodeAndVoucherDateGreaterThanEquals(branch, fromDate, params) Sample 3: def list = AccountTransaction.findAllByCompanyCodeAndTransGroup(branch, group, params) "params" contains attributes related to sorting, paging etc. It is very easy to use finder methods but when you want to filter objects by more conditions we need to look for alternatives. For understanding the relationships used in this sample, I listed the grails domain classes. class TransactionTyp
4 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