Question

Difficulty: Very hardTroubleshooting API Gateway Errors and CORS

A frontend Single Page Application (SPA) hosted at `https://dashboard.company.local` makes a cross-origin `POST` request to an Amazon API Gateway REST API configured with a Lambda Proxy Integration. In the browser developer tools, the developer observes that the preflight `OPTIONS` request succeeds with a `200 OK` status code, but the subsequent `POST` request is blocked. The browser console displays: `Access-Control-Allow-Origin 'https://dashboard.company.local' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource`. Additionally, the network tab shows that the `POST` request received a `502 Bad Gateway` status code from API Gateway. Which of the following is the most accurate explanation for this behavior, and what corrective actions should the developer take to resolve both issues?

  1. The Lambda function returned a response payload that does not conform to the required JSON format for Lambda Proxy Integration, causing API Gateway to generate a default 502 Bad Gateway response that lacks the necessary CORS headers. The developer must update the Lambda function to return a structured JSON response containing statusCode, headers (including Access-Control-Allow-Origin), and body, and configure CORS headers on the API Gateway Gateway Responses for 5XX errors.Answer
  2. B
    The CORS headers were only configured on the mock OPTIONS method in API Gateway, which does not propagate to the actual POST integration. The developer must change the integration type to Lambda Custom Integration, configure a custom Integration Response to map CORS headers from the Lambda response, and enable CORS on the S3 bucket hosting the client SPA.
  3. C
    The Lambda function is returning a raw string response because it is configured with Lambda Custom Integration, which requires the frontend to send custom preflight parameters. The developer should change the integration type to Lambda Proxy Integration because proxy integrations automatically inject the required Access-Control-Allow-Origin headers on behalf of the backend Lambda function.
  4. D
    The request failed authentication at the API Gateway level because the custom Lambda Authorizer returned an invalid or expired IAM policy, triggering a 502 error. The developer must modify the Lambda Authorizer to return a policy that allows the OPTIONS method and configure the authorizer to bypass CORS validation for cross-origin client apps.

Answer

The Lambda function returned a response payload that does not conform to the required JSON format for Lambda Proxy Integration, causing API Gateway to generate a default 502 Bad Gateway response that lacks the necessary CORS headers. The developer must update the Lambda function to return a structured JSON response containing statusCode, headers (including Access-Control-Allow-Origin), and body, and configure CORS headers on the API Gateway Gateway Responses for 5XX errors.
The correct response accurately explains that a 502 Bad Gateway error occurs when the Lambda function output does not conform to the expected schema for Lambda Proxy Integration. Because API Gateway generates this 502 response itself, it bypasses the integration response headers. To fix this, the developer must ensure the Lambda function returns a properly formatted JSON object with 'statusCode', 'headers' (including the 'Access-Control-Allow-Origin' header), and a stringified 'body'. Additionally, to prevent future API Gateway-generated errors from being blocked by CORS, Gateway Responses for 5XX errors must be configured to return the CORS headers.

Step-by-Step Solution

1
Inspect CloudWatch Logs for the Lambda function backend.
Identify any formatting errors in the returned payload or unhandled exceptions that prevent Lambda from returning the expected JSON structure.
API Gateway generates a 502 Bad Gateway error when the backend Lambda function output does not match the expected structure required by the Lambda Proxy Integration.
2
Format the Lambda function's return object according to Lambda Proxy Integration specifications.
Ensure the response dictionary contains 'statusCode', 'body' (as a string), and 'headers' (containing 'Access-Control-Allow-Origin').
Under Lambda Proxy Integration, API Gateway expects the backend code to explicitly define the CORS headers in its response payload.
3
Configure CORS headers on Gateway Responses for 5XX and 4XX errors in API Gateway.
Ensure that if API Gateway itself encounters an error (e.g., Lambda timeout or gateway error), the browser receives the correct Access-Control-Allow-Origin header to avoid CORS errors masking the HTTP error code.
Default gateway-generated errors do not contain CORS headers unless they are configured in Gateway Responses.

Key Concept

API Gateway Lambda Proxy Integration response format and CORS troubleshooting
Rate this question