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?
- AModify 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.
- 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.Cevap
- CEnable 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.
- DUpdate 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.
Cevap
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.
Adım Adım Çözüm
Anahtar Kavram
API Gateway Lambda Proxy Integration Response Structure and CORS Requirements
Tahmini Süre:2m 0s