Soru

Zorluk: OrtaTroubleshooting API Gateway Errors and CORS

A developer is hosting a client-side web application on `https://console.inventoryhub.net`. The application makes an HTTP `DELETE` request to an Amazon API Gateway REST API that uses a Lambda proxy integration to remove items from a database. When a user attempts to delete an item, the browser blocks the request and displays a CORS preflight error in the console. Additionally, when testing the endpoint directly using a custom HTTP client, the API returns a `502 Bad Gateway` error. Which two actions should the developer take to resolve these issues? (Select TWO.)

  1. Configure a MOCK integration for the OPTIONS method on the API Gateway resource to return the CORS headers Access-Control-Allow-Origin and Access-Control-Allow-Methods.Cevap
  2. Update the backend Lambda function to return a JSON response containing the statusCode, body, and headers fields, including the Access-Control-Allow-Origin header.Cevap
  3. C
    Add a CORS configuration policy to the Amazon S3 bucket where the web app is hosted to allow HTTP DELETE requests from the API Gateway domain.
  4. D
    In the API Gateway console under the DELETE method, use Integration Responses to map the Access-Control-Allow-Origin header from the Lambda function's return value.
  5. E
    Associate an Amazon Cognito User Pool authorizer with the OPTIONS method to authenticate the preflight requests before forwarding them.

Cevap

Configure a MOCK integration for the OPTIONS method on the API Gateway resource to return the CORS headers, and update the backend Lambda function to return a JSON response containing the statusCode, body, and headers fields including the Access-Control-Allow-Origin header.
The browser blocks the request because the API Gateway does not respond to the preflight OPTIONS request with the required CORS headers, which is fixed by configuring a MOCK integration for OPTIONS. Furthermore, the 502 Bad Gateway error indicates that the Lambda function's response violates the required format for proxy integrations. Correcting the Lambda output to include statusCode, body, and headers (with Access-Control-Allow-Origin) resolves both the 502 error and allows the browser to accept the actual DELETE request response.

Adım Adım Çözüm

1
Enable CORS on the API Gateway resource for the OPTIONS method.
This creates an OPTIONS method with a MOCK integration that returns the Access-Control-Allow-Origin and Access-Control-Allow-Methods headers to satisfy the browser's preflight request.
Browsers send a preflight OPTIONS request before cross-origin non-simple requests (like DELETE). The API must respond to OPTIONS without authentication and with the appropriate CORS headers.
2
Ensure the Lambda function returns a correctly structured JSON object containing statusCode, body, and headers.
This resolves the 502 Bad Gateway error caused by the malformed response format under Lambda proxy integration.
Under Lambda proxy integration, API Gateway expects a specific return JSON structure. If the Lambda returns a raw string or missing fields, API Gateway cannot parse it and returns a 502 Bad Gateway error.
3
Include the Access-Control-Allow-Origin header within the Lambda function's returned headers dictionary.
The browser successfully receives the Access-Control-Allow-Origin header on the actual DELETE response and permits the client-side application to read the response.
For Lambda proxy integrations, CORS headers for the actual request (DELETE) must be returned by the backend Lambda function itself, not just the OPTIONS preflight method.

Anahtar Kavram

CORS preflight requests require a MOCK OPTIONS endpoint returning CORS headers, and Lambda proxy integrations require the backend Lambda function to format its response with statusCode, body, and headers, including Access-Control-Allow-Origin.
Bu soruyu puanla