How to Solve the CORS Error: Access-Control-Allow-Origin when trying to fetch data from API

Introduction

Hemanth of Alliance Department here. In this blog, I will try to give a solution of CORS error that i encountered when i was trying to fetch the data from API.

What Maybe the reasons for the error

1. Did not enable the CORS in API Gateway or after enabling haven't deployed it
2. Haven't enabled the lambda proxy in the method of API Gateway
3. if there might me changes required in the code
4. Adding the CORS plugin to your browser (When testing)

Step by Step of how to solve it

Enabling the CORS in API Gateway and deploying it

First in AWS API Gateway, select your API Next click your method Now click on action and select enable CORS Click on enable CORS and replace existing CORS headers, this should solve the CORS error Don't forget to deploy the API After doing this as well if the problem persists follow the next step

In the API Gateway enabling the Lambda proxy in the method

Now go to your method, here i'm going with ANY Next clicking the integration request Enable the lambda proxy integration Again deploy the API Even after this you get an error called GET, then follow the below step

Making following changes in the code

Adding the below code in the response section of your lambda function This should solve your CORS error.

Adding the CORS Plugin for browser

I highly recommend the above methods to solve this error but if you only want to test then you can follow the below method Search for CORS plugin in Google click on add to chrome click on toggle on Now you should see the data being displayed, for example here the data is being displayed in the table

Conclusion

Hope with this you have an understanding of how to solve the CORS error when you encounter it while getting data from backend to frontend.