Examkin

Question

Difficulty: HardTroubleshooting API Gateway Errors and CORS

A Vue.js single-page application hosted on `https://dashboard.analyticsapp.io` receives a `502 Bad Gateway` error in the browser console when sending a `DELETE` request to an Amazon API Gateway REST API. The API Gateway resource is integrated with a Lambda function using Lambda Proxy Integration. While CloudWatch logs show the Lambda function executed successfully and returned the raw JSON `{"status": "success", "message": "Record deleted"}`, the API Gateway Execution logs reveal the error: 'Execution failed due to configuration error: Malformed Lambda proxy response'. Which of the following modifications should the developer make to resolve this error?

  1. A
    Modify the Integration Response in the API Gateway Console to parse the JSON object returned by the Lambda function and map it to a `200 OK` HTTP status code using a Velocity Template Language (VTL) mapping template.
  2. Change the Lambda function code to return a JSON object with the keys `statusCode` as an integer, `headers` containing the required CORS headers, and a stringified JSON string of the payload in the `body` field.Answer
  3. C
    Enable CORS on the Amazon S3 bucket hosting the Vue.js single-page application and add the domain `https://dashboard.analyticsapp.io` to the bucket's CORS configuration file.
  4. D
    Update the API Gateway integration request to use a Lambda Authorizer instead of Lambda Proxy Integration, and return an IAM policy that allows the `execute-api:Invoke` action on the `DELETE` method.

Answer

Change the Lambda function code to return a JSON object with the keys statusCode as an integer, headers containing the required CORS headers, and a stringified JSON string of the payload in the body field.
The correct answer is to modify the Lambda function to return a formatted JSON object with `statusCode`, `headers`, and a stringified `body`. When using Lambda Proxy Integration, API Gateway requires the backend function to return a specific JSON schema. If the function returns a raw custom JSON object without these fields, API Gateway cannot construct the HTTP response, resulting in a `502 Bad Gateway` error with the 'Malformed Lambda proxy response' log. Additionally, because the client is a single-page application hosted on a different origin, the `headers` object must include the necessary CORS headers (e.g., `Access-Control-Allow-Origin`) to prevent browser CORS blocks.

Step-by-Step Solution

1
Analyze the API Gateway execution logs and client-side HTTP error.
The 502 Bad Gateway status and the log message 'Malformed Lambda proxy response' indicate that the backend Lambda function is integrated via Lambda Proxy Integration but did not return the schema expected by API Gateway.
API Gateway requires a specific output format from Lambda functions when using proxy integrations.
2
Differentiate between Lambda Proxy and Lambda Custom integration response handling.
Unlike Custom Integration, which allows the use of API Gateway Integration Response mapping templates (VTL) to format raw outputs, Proxy Integration requires the backend Lambda function to construct the complete HTTP response structure directly.
This establishes that the fix must be implemented within the Lambda function code rather than in the API Gateway configuration.
3
Identify the required schema fields for Lambda Proxy Integration.
The Lambda function response must be a JSON object with `statusCode` (integer), `headers` (map/object), and `body` (stringified payload).
Failing to supply these fields leads to a configuration execution failure in API Gateway.
4
Determine the CORS requirements for cross-origin frontend requests.
Because the request is initiated from `https://dashboard.analyticsapp.io` (a different origin), the function must return the CORS header `Access-Control-Allow-Origin` inside the `headers` key of the proxy response.
For Proxy Integrations, CORS headers enabled via the API Gateway console only apply to the mock OPTIONS preflight response, not to the actual integration response.

Key Concept

API Gateway Lambda Proxy Integration Response Structure and CORS Requirements
Estimated Time:2m 0s
Rate this question

Topics

Troubleshooting API Gateway Errors and CORS

More questions from this topic