A CORS preflight blocked error is displayed in the browser console when a client-side SvelteKit application hosted on https://manager.fleet-ops.net sends a POST request to an Amazon API Gateway REST API. The request includes a custom HTTP header named X-Client-Session-ID. The developer had previously enabled CORS on the API Gateway resource, which created an OPTIONS method returning the standard headers Access-Control-Allow-Origin and Access-Control-Allow-Methods. Which action must the developer take to resolve this CORS validation error?
- AAdd the X-Client-Session-ID header to the CORS configuration policy of the Amazon S3 bucket hosting the frontend application.
- Update the API Gateway OPTIONS method integration response to include X-Client-Session-ID in the Access-Control-Allow-Headers header value, and redeploy the API.Answer
- CModify the backend Lambda function associated with the POST method to return the Access-Control-Allow-Headers header containing X-Client-Session-ID in its response payload.
- DConfigure the OPTIONS method in API Gateway to require an API Key and pass the X-Client-Session-ID as the API Key value in the request.
Answer
Update the OPTIONS method integration response in API Gateway to include the custom header in the Access-Control-Allow-Headers list, then deploy the API.
When a client application includes a custom HTTP header such as X-Client-Session-ID, the browser automatically sends a preflight OPTIONS request before the actual POST request. The OPTIONS method is typically configured in API Gateway using a Mock integration. To allow the request to proceed, the OPTIONS method's integration response must include the custom header name in its Access-Control-Allow-Headers value. The API must then be redeployed to apply the configuration change.
Step-by-Step Solution
Key Concept
CORS preflight request handling with custom headers in API Gateway