Fixing 'Access-Control-Allow-Origin' Error with API Gateway and Lambda Function

Troubleshooting 'Access-Control-Allow-Origin' Error with API Gateway and Lambda Function

Prev Question Next Question

Question

You've just configured a Lambda function that sits behind the API gateway service.

When you try to invoke the Lambda function via the API gateway service from Javascript in your HTML page, you receive the following error. No 'Access-Control-Allow-Origin' header is present on the requested resource.

Origin 'null' is therefore not allowed access. What can be done to resolve this error?

Answers

Explanations

Click on the arrows to vote for the correct answer

A. B. C. D.

Answer - B.

The AWS Documentation mentions the following.

When your API's resources receive requests from a domain other than the API's own domain, you must enable cross-origin resource sharing (CORS) for selected methods on the resource.

This amounts to having your API respond to the OPTIONS preflight request with at least the following CORS-required response headers:

Access-Control-Allow-Methods.

Access-Control-Allow-Headers.

Access-Control-Allow-Origin.

Option A is incorrect because CORS is set on the API gateway level and not the Lambda function.

Options C and D are incorrect since IAM Policy is not the reason as to why the error is occurring.

For more information on CORS for the API gateway, please refer to the below URL-

https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html

The error message indicates that the API Gateway service has denied access to the Lambda function due to missing Access-Control-Allow-Origin header. This is a Cross-Origin Resource Sharing (CORS) error that occurs when a webpage makes a request to a resource on a different domain or port.

To resolve this error, you need to configure CORS for the API Gateway service. CORS is a security feature that allows web pages to request resources from different domains without compromising security.

Option A: Enable CORS for the Lambda function This option is not correct because the CORS configuration needs to be done for the API Gateway service, not the Lambda function.

Option B: Enable CORS for the methods in the API Gateway This option is the correct answer. To enable CORS for the API Gateway service, you need to add the necessary headers to the HTTP response returned by the API Gateway. This can be done by enabling CORS for the API Gateway methods using the following steps:

  1. Open the API Gateway console and select your API.
  2. Select the resource and method you want to enable CORS for.
  3. Click on the 'Actions' drop-down menu and select 'Enable CORS'.
  4. This will create a new CORS configuration for the selected method. You can modify the default configuration if necessary.
  5. Save the CORS configuration and redeploy the API.

Option C: Change the IAM policy for the Lambda function to enable anonymous access This option is not correct because enabling anonymous access would not resolve the CORS error. The error is related to the HTTP headers and not the Lambda function access policy.

Option D: Change the IAM policy for the API gateway to enable anonymous access This option is not correct because enabling anonymous access would not resolve the CORS error. The error is related to the HTTP headers and not the API Gateway access policy.

In summary, to resolve the No Access-Control-Allow-Origin header is present on the requested resource error, you need to enable CORS for the API Gateway methods that the Lambda function is attached to. This can be done by configuring the necessary headers in the HTTP response returned by the API Gateway.