Fixing Cors Issue on Lambda Functions

When you create a Lambda function and expose it as a functional URL, you might encounter CORS (Cross-Origin Resource Sharing) issues from the front end. While it may work as expected in Postman, implementing the same API in the front-end application (such as React or Next.js) can result in CORS errors.

The error message typically appears as follows

from origin ‘http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. from front end

Fixing the issue

This issue mainly occurs when you r expose the lambda directly using a functional URL and do not correctly set the cors setting on the AWS console.

Step 1: Go to your Lambda function
Navigate to the AWS Management Console and access the Lambda service. Locate and select your Lambda function from the list of functions.

Step 2: Access the Configurations tab
Locate and click on the “Configurations” tab within the selected Lambda function. This tab contains various settings for your Lambda function.

Step 3: Configure cross-origin resource sharing (CORS)
Ensure that you have enabled CORS for your Lambda function. This setting allows cross-origin requests to access your Lambda function.

Step 4: Specify the allowed origin
In the “Allow Origin” section, specify either “*” to allow requests from any origin, or enter the specific origin URL from where you expect the requests to come. This ensures that the appropriate “Access-Control-Allow-Origin” header is included in the response.

Step 5: Add required headers
Scroll down to the “Allow Header” section. Here, you need to add the headers that are being sent from the front end. Include the relevant headers to ensure they are allowed by the CORS policy.

Step 6: Specify allowed methods
In the “Allow Methods” section, select the appropriate HTTP methods that should be allowed by the CORS policy. Choose the methods that are being used by your front-end application to interact with the Lambda function.

Step 7: Save the changes
Once you have completed the necessary configuration changes, save the changes to apply the updated CORS settings to your Lambda function.

By following these steps, you should be able to fix the CORS issue that occurs when accessing your Lambda function from the front end.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

If you liked this article, please show your appreciation by clapping 👏 below!