CORS Policy Issue When Calling Lambda Function from React (Amplify + Cognito Setup)

The CORS error you're experiencing is a common issue when accessing API Gateway endpoints from a different origin, such as your local development environment. This happens because browsers enforce the Same-Origin Policy as a security measure, and your localhost development server is considered a different origin than your AWS API Gateway endpoint.

To resolve this issue, you have several options:

1. Configure CORS in API Gateway:

• In the API Gateway console, enable CORS for your endpoint
• Set Access-Control-Allow-Origin to http://localhost:5173 (your React app's origin) or * for testing
• Include all HTTP methods your API supports (GET, POST, PUT, DELETE, OPTIONS)
• Add any custom headers your application uses
• Ensure you have an OPTIONS method configured for your resource, as browsers send a preflight OPTIONS request before the actual request

2. Add CORS headers in your Lambda function:

• Your Lambda function should return the necessary CORS headers in its response:

return {
'statusCode': 200,
'headers': {
'Access-Control-Allow-Origin': 'http://localhost:5173',
'Access-Control-Allow-Methods': 'GET,POST,PUT,DELETE,OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'
},
'body': JSON.stringify(responseData)
};

3. Using Amplify to call Lambda functions:

• If you're using Amplify CLI to manage your resources, you can use the Amplify API category to call your Lambda function, which handles CORS and authentication automatically
• Configure your Lambda function as an API in your Amplify project using amplify add api
• Then use API.post() or similar methods from the Amplify library to call your function

Regarding your specific questions:

• Calling Lambda directly: You cannot call Lambda directly from a browser-based application due to security concerns. API Gateway provides the necessary HTTP interface and security controls.

• Configuring CORS with Amplify CLI: When you create an API with Amplify CLI, you can configure CORS during setup. You can also update it later using amplify update api and following the prompts to configure CORS settings.

• Best practice for AdminUserGlobalSignOut: For sensitive operations like signing out users, it's generally better to expose this functionality through a secured API endpoint rather than calling AWS services directly from the frontend. Your current approach of using a Lambda function behind API Gateway with proper authentication is appropriate, but ensure:

1. The endpoint is properly secured with Cognito authorizers
2. CORS is configured correctly
3. Proper error handling is implemented

After making these changes, remember to deploy your API in API Gateway to ensure the changes take effect.
Sources
CORS error while accessing an endpoint in API gateway | AWS re:Post
Blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status | AWS re:Post
CloudFront -> API Gateway works well, alternate domain name -> API Gateway gives CORS error | AWS re:Post