CloudFront with Lambda@Edge returns 200 with empty body

Question

Hi all,

I have set up a static website (Angular SPA) on S3 behind using CloudFront. To handle certain redirect I added a Lambda@Edge with a "Origin response" function association. In general this works well and behaves as expected. But for some reason, after some times, I receive a response with status 200 and an empty body from CloudFront. The X-Cache header of the response is set to "Hit from cloudfront" so it looks like the cache from CloudFront got invalid somehow, after I trigger a cache invalidation (/*) everything works fine for a few hours. I tested multiple cache behaviours but nothing seems to work in this case. As soon as I remove the Lambda@Edge the cache issue is gone.

Here you can see the code in my Lamda@Edge:

```
export const handler = async (event) => {
    const response = event.Records[0].cf.response;
    const request = event.Records[0].cf.request;
    
    let headers = response.headers;
    if (!headers) {
        headers = {};
    }
    headers['access-control-allow-origin'] = [{key: 'Access-Control-Allow-Origin', value: "*"}];
    headers['access-control-allow-methods'] = [{key: 'Access-Control-Allow-Methods', value: "GET, OPTIONS, HEAD"}];
    headers['access-control-allow-headers'] = [{key: 'Access-Control-Allow-Headers',value: "*"}];
    headers['access-control-max-age'] = [{key: 'Access-Control-Max-Age', value: "86400"}];
    response.headers = headers;
    
    if (request?.method === 'OPTIONS') {
        response.status = '204';
        response.statusDescription = 'No Content'
        return response;
    }
    
    if (request?.uri?.startsWith) {
        if (request.uri.startsWith('/404-not-found')) {
            response.status = '404';
            response.statusDescription = 'Not Found';
            return response;
        }
        
        const redirect = (path) => {
            const redirectResponse = {
                status: '301',
                statusDescription: 'Moved Permanently',
                headers: {
                  'location': [{
                    key: 'Location',
                    value: path,
                  }],
                  'cache-control': [{
                    key: 'Cache-Control',
                    value: "max-age=3600"
                  }],
                },
            };
            return  redirectResponse;
        }
        
        // categories
        if (request.uri.startsWith('/old')) {
            return redirect('/new'); 
        }
        // ... here are some additional urls

}

response.status = '200';
    response.statusDescription = 'OK';

return response;
};
```

Has anyone experienced similar issues or has an idea how I might be able to solve this issue? I am testing this for the past few weeks and was not able to get around it for some reason.

Thanks a lot!

re:Post Agent · Answer

The issue you're experiencing with CloudFront returning a 200 status code and an empty body after some time, despite working correctly initially, could be related to how your Lambda@Edge function is interacting with CloudFront's caching behavior. Here are a few potential causes and solutions to consider:

1. Cache Key: Ensure that your CloudFront distribution's cache behavior is configured to include all relevant headers in the cache key. If the cache key doesn't include headers that your Lambda function uses to make decisions, it could lead to inconsistent behavior.

2. Origin Response Timing: The "Origin Response" trigger for Lambda@Edge runs after CloudFront receives a response from the origin. If your function is modifying the response in a way that affects caching, it could lead to unexpected results.

3. Error Handling: Your Lambda function doesn't appear to have explicit error handling. Adding try-catch blocks and logging errors could help identify if there are any runtime issues causing the function to fail silently.

4. Response Manipulation: Your function is always setting the status to 200 at the end, which might override the actual status from the origin. Consider removing this if it's not necessary for all responses.

5. Cache-Control Headers: Ensure that appropriate Cache-Control headers are being set, either by your origin or by the Lambda function, to control how CloudFront caches the content.

6. CloudFront Function: Consider using a CloudFront Function instead of Lambda@Edge for simple header manipulations and redirects, as it has less impact on caching behavior.

To troubleshoot:

1. Add extensive logging in your Lambda function to track its execution path and any potential errors.
2. Review CloudFront and Lambda@Edge logs in CloudWatch for any error messages or unexpected behavior.
3. Verify that your cache policy and origin request policy are configured correctly for your use case.
4. Test with a simplified version of your Lambda function to isolate the issue.

If the problem persists, you might need to reconsider your caching strategy or how you're implementing the redirects and header modifications.  
**Sources**  
[Test and debug Lambda@Edge functions - Amazon CloudFront](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/lambda-edge-testing-debugging.html)  
[Community | Enhancing security for Lambda function URLs](https://community.aws/content/2fuBTcoVg7nnRIVLnqjIsIC8LAi/enhancing-security-for-lambda-function-urls)  
[Protecting an AWS Lambda function URL with Amazon CloudFront and Lambda@Edge | AWS Compute Blog](https://aws.amazon.com/blogs/compute/protecting-an-aws-lambda-function-url-with-amazon-cloudfront-and-lambdaedge/)  
[CachePolicyHeadersConfig - Amazon CloudFront](https://docs.aws.amazon.com/cloudfront/latest/APIReference/API_CachePolicyHeadersConfig.html)

Leo K · Answer

As far as I can see, you're overwriting the response status code from the origin with a 200 OK status in all cases where a response isn't generated earlier in your function.

For example, if your origin returned a 403, 404, or 5xx error (such as a SlowDown response from S3) or a simple 301 redirect without content,  your Lambda@Edge code would change it into a 200 OK, telling both the viewer and CloudFront that it's a valid, cacheable response:
```javascript
...
    response.status = '200';
    response.statusDescription = 'OK';
```

Unless you want your site to change all responses into 200 OKs no matter what was requested or returned by the origin, you should either remove the status overwrite above, or apply a condition check for the cases where you want to apply it.

tapple (AWS) · Answer

Your code shows that you're caching a 301 response for 1 hour (3600 seconds). A 301 is a permanent redirect. Browsers typically store this permanently, until the cache is cleared. I would try not setting a cache-control directive on that and see how it goes.

EXPERT

tapple (AWS)

answered 2 years ago

EXPERT

Oleksii Bebych

reviewed 2 years ago

CloudFront with Lambda@Edge returns 200 with empty body

Add your answer

Relevant content