AWS Cloudfront giving 503 after invalidating s3 origin

I'm having simple setup where I have Cloudfront delivering s3 static website origin. The behavior is set to be http only, cache policy is s3 recommended and cors headers are s3 recommended. However, for this problem I don't think these things are important as nothing else changed, only the invalidation happened.

I invalidated the origin using wildcard (*) to let Cloudfront to use the newly uploaded files. My s3 bucket is having public access and did work correctly beforehand. What is wrong?

This might be because your s3 bucket policies. Your Cloudfront was able to get the objects before invalidation but do not know the version of the objects and therefore cannot determine whether the objects are new or not.

I suggest you to try this bucket policy:

    {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject",
                "s3:GetObjectVersion"
            ],
            "Resource": "arn:aws:s3:::your-bucket-name-here/*"
        }
    ]
}

This allows the Cloudfront (as well as everything else) to see the versions of your bucket so it can deduct if there are newer versions after the invalidation. You might want to fine tune this if you want to only the Cloudfront see the files in your bucket.