Cloudfront Distribution URL gives 503 error (Service Temporarily Unavailable) whereas Origin server gives 404 when accessing cloudfront function.

It's unclear from your post and comment what the function is doing, and what part you're having trouble with - or even if the function is throwing errors at all. There are some sample functions available on aws-samples which might help you get started.

For troubleshooting, I would start by removing the function association from your CloudFront behavior and making sure that all your CloudFront configuration is working as expected. Then add the function back in - perhaps adding one piece of functionality at a time so that you can easily identify the cause of any problems you encounter.

Here are a few suggestions to help integrate your Flask application with CloudFront:

• Ensure the origin of your CloudFront distribution is configured as a REST API endpoint rather than a website endpoint. The REST API endpoint allows you to specify custom HTTP methods like POST that may be required by your Flask application.
• Check that the HTTP methods allowed on your CloudFront distribution match those required by your Flask application. You can modify the allowed methods in the CloudFront console or via the AWS CLI.
• Consider using AWS WAF with CloudFront to restrict access to your Flask application only from the CloudFront distribution. This provides an extra layer of security compared to using origin access identity alone.
• If you are experiencing SSL issues between clients and CloudFront, ensure you have requested an ACM certificate for your custom domain and associated it with the distribution. You may also need to check redirection policies on your Flask application.