Soru

Zorluk: ZorTroubleshooting API Gateway Errors and CORS

A developer has deployed a React-based inventory management portal hosted on a static website on AWS Amplify. The portal needs to send `PATCH` requests to an Amazon API Gateway REST API that integrates with a backend AWS Lambda function using a Lambda Proxy integration.

When the portal attempts to invoke the endpoint, the browser console displays a CORS preflight block error. Additionally, when testing the API directly using a CLI tool, the response returns a `502 Bad Gateway` error. The Lambda function execution logs show that the function completes successfully, but it returns a serialized JSON string containing only the inventory data.

Which two actions should the developer take to resolve these issues? (Select two.)

  1. Configure the OPTIONS method in API Gateway to return the appropriate CORS headers for the preflight request.Cevap
  2. Modify the backend Lambda function to return a structured JSON object containing 'statusCode', 'body', and 'headers', ensuring 'Access-Control-Allow-Origin' is included in the headers.Cevap
  3. C
    Add the 'Access-Control-Allow-Origin' header to the response headers of the static website hosting configuration in AWS Amplify.
  4. D
    Change the integration type to Lambda Custom integration and format the Lambda function's return payload as a raw plain-text string.
  5. E
    Implement a Lambda Authorizer that inspects the 'Origin' header and returns an IAM policy allowing the 'execute-api:Invoke' action for the domain.

Cevap

To resolve these errors, the developer must configure the OPTIONS method in API Gateway to handle the preflight request and modify the backend Lambda function to return a structured JSON object containing 'statusCode', 'body', and 'headers' (including the 'Access-Control-Allow-Origin' header).
For CORS to work with a Lambda Proxy integration, the browser must receive the appropriate CORS headers for both the preflight OPTIONS request and the actual request. Configuring the OPTIONS method in API Gateway ensures that preflight requests are answered with the correct CORS headers. For the actual request, because a Lambda Proxy integration is used, the backend Lambda function is responsible for returning the response payload in a structured JSON format containing 'statusCode', 'body', and 'headers', with the 'Access-Control-Allow-Origin' header explicitly set inside the headers map. This resolves both the preflight CORS block and the 502 Bad Gateway integration error.

Adım Adım Çözüm

1
Configure the OPTIONS method in API Gateway.
The browser successfully receives CORS headers during the preflight OPTIONS request, allowing it to proceed with the actual cross-origin request.
Before sending non-simple HTTP requests (such as PATCH), browsers send a preflight OPTIONS request to verify CORS permissions.
2
Modify the Lambda function response format.
The Lambda function returns a valid JSON object matching the proxy integration structure, containing 'statusCode', 'body', and 'headers'.
Lambda Proxy integrations require a strict response payload format; failing to provide this schema causes API Gateway to return a 502 Bad Gateway error.
3
Include the Access-Control-Allow-Origin header in the Lambda function's response headers.
The browser receives the Access-Control-Allow-Origin header with the actual PATCH response, satisfying the CORS policy constraint.
Under Lambda Proxy integrations, API Gateway does not automatically inject CORS headers into integration responses, meaning the backend code must supply them.

Anahtar Kavram

Handling CORS preflight configurations and Lambda Proxy response integration requirements in Amazon API Gateway.
Tahmini Süre:2m 30s
Bu soruyu puanla