Question

Difficulty: MediumTroubleshooting API Gateway Errors and CORS

A developer is troubleshooting a web dashboard hosted on `https://monitor.server-analytics.io` that queries a backend using an Amazon API Gateway REST API. The API is configured with a Lambda Proxy integration. When the client makes a request to the API, the browser blocks the response and displays the following error:

`Access to XMLHttpRequest at 'https://api.server-analytics.io/v1/logs' from origin 'https://monitor.server-analytics.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.`

Which TWO steps should the developer take to resolve these errors?

  1. Configure the `OPTIONS` method on the API Gateway resource to return the required CORS headers for preflight requests.Answer
  2. Modify the Lambda function's response payload to include the `Access-Control-Allow-Origin` header in the `headers` object.Answer
  3. C
    Configure a CORS configuration rule on the Amazon S3 bucket hosting the web dashboard.
  4. D
    Change the integration type to Lambda Custom Integration and configure API Gateway integration responses to handle the request headers.
  5. E
    Add an IAM resource policy to the API Gateway API that allows the origin `https://monitor.server-analytics.io`.

Answer

Configure the `OPTIONS` method on the API Gateway resource to return the required CORS headers for preflight requests, and modify the Lambda function's response payload to include the `Access-Control-Allow-Origin` header in the `headers` object.
The correct options are configuring the `OPTIONS` method on the API Gateway resource and modifying the Lambda function's response payload. Under a Lambda Proxy integration, resolving CORS requires a two-fold approach: first, the preflight `OPTIONS` request must be handled by API Gateway (or a mock integration) to return the allowed origin; second, the backend Lambda function must return the `Access-Control-Allow-Origin` header in its execution response.

Step-by-Step Solution

1
Enable CORS preflight by configuring the `OPTIONS` method on the API resource.
The browser's initial preflight request is successfully answered with `Access-Control-Allow-Origin` and other CORS headers.
Browsers send an HTTP `OPTIONS` preflight request before cross-origin non-simple requests to verify if the server permits the cross-origin call.
2
Add the `Access-Control-Allow-Origin` header to the backend response returned by the Lambda function.
The actual HTTP request succeeds because the response payload contains the required header.
Under Lambda Proxy integration, API Gateway does not automatically inject CORS headers into the backend response. The backend Lambda function must explicitly return these headers in its payload.

Key Concept

CORS handling in API Gateway Lambda Proxy integrations requires CORS configuration for both the preflight `OPTIONS` method on API Gateway and the actual method response from the backend Lambda function.
Estimated Time:1m 30s
Rate this question