Problem with cors api gateway and lambda proxy integration

Question

return {
            'statusCode': 200,
            'headers': {
                'Access-Control-Allow-Origin': '*',
                'Access-Control-Allow-Methods': '*',
                'Access-Control-Allow-Headers': '*',
            }
        }
this is a response from lambda code for delete method. I have enable cors for my resource, which is /dev/api/appoint/delete. I notice in network tab, there are 2 requests that were sent from react app to api gateway, 1 is options, check header do see that it include every headers for cors, the other was delete request. But both of them still got cors error. Only get method get pass, the other like post, put, delete all failed. I use lambda proxy for api gateway

re:Post Agent · Answer

The issue you're experiencing with CORS (Cross-Origin Resource Sharing) in API Gateway and Lambda proxy integration is likely due to a combination of factors. Let's address them step by step:

1. Lambda Function Response:
Your Lambda function response looks correct for handling CORS. However, make sure you're including the 'body' key in your response, even if it's empty. For example:

```python
return {
'statusCode': 200,
'headers': {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': '*',
'Access-Control-Allow-Headers': '*',
},
'body': JSON.stringify({}) # Include this even if empty
}
```

2. API Gateway Configuration:
Ensure that CORS is properly configured in API Gateway for all methods, not just GET. You mentioned enabling CORS for your resource, but double-check that it's enabled for all methods (GET, POST, PUT, DELETE, OPTIONS) on that resource.

3. OPTIONS Method:
For the OPTIONS method (preflight request), make sure your API Gateway is configured to respond correctly. With Lambda proxy integration, your Lambda function should handle the OPTIONS request and return the appropriate CORS headers.

4. HTTP vs. REST API:
If you're using an HTTP API, be aware that CORS handling is slightly different from REST APIs. Ensure you've configured CORS correctly based on the type of API you're using.

5. Stage Variables:
If you're using stage variables in your API Gateway setup, ensure they're properly configured and don't interfere with your CORS settings.

6. Client-side Configuration:
On your React app, make sure you're not setting any custom headers that might trigger a preflight request without proper handling.

7. Logging and Debugging:
Enable CloudWatch Logs for your API Gateway and Lambda function. This will help you see exactly what's happening when the requests come in and how they're being processed.

To troubleshoot further:
- Check the CloudWatch Logs for both API Gateway and Lambda to see if there are any error messages or unexpected behaviors.
- Verify that the Lambda function is returning the correct response for all HTTP methods, not just DELETE.
- Double-check the API Gateway console to ensure CORS is enabled for all methods and the integration request/response is set up correctly for each method.
- Test your API using a tool like Postman to isolate whether the issue is on the API side or the client side.

If the problem persists after checking these points, you may need to review your API Gateway settings in more detail, particularly focusing on how the integration request and response are configured for each method.  
**Sources**  
[Lambda proxy integrations in API Gateway - Amazon API Gateway](https://docs.aws.amazon.com/apigateway/latest/developerguide/set-up-lambda-proxy-integrations.html)  
[Troubleshoot errors for API Gateway endpoints with Lambda integration | AWS re:Post](https://repost.aws/knowledge-center/api-gateway-internal-server-error)  
[Troubleshooting issues with HTTP API Lambda integrations - Amazon API Gateway](https://docs.aws.amazon.com/apigateway/latest/developerguide/http-api-troubleshooting-lambda.html)  
[Handle Lambda errors in API Gateway - Amazon API Gateway](https://docs.aws.amazon.com/apigateway/latest/developerguide/handle-errors-in-lambda-integration.html)

Problem with cors api gateway and lambda proxy integration

Add your answer

Relevant content