title: Cloudfront not caching missing pages
body: <p>So to explain a problem I have an S3 bucket with static site and CloudFront as CDN. On S3 the index and error document are both <code>index.html</code>. So when I go to <code>subdomain.example.com</code> I get served <code>index.html</code> and get <code>Hit from Cloudfront</code>.</p>
  
  <p>However my static page is Vue page with router and default path is <code>/en</code> so when I reload the page <code>subdomain.example.com/en</code> I get <code>Error from cloudfront</code>. The same happens if I try to refresh it after it got hit the first time. Everything else(.css, .js, .img ...) is cached ok. </p>
  
  <p>I have S3 connected in origin like that: 
  <code>
  Origin Domain Name: s3.eu-central-1.amazonaws.com
  Origin Path: /subdomain.example.com
  Origin ID: subdomain.example.com
  Minimum Origin SSL Protocol: TLSv1
  Origin Protocol Policy: HTTP Only
  Origin Response Timeout: 30
  Origin Keep-alive Timeout: 5
  HTTP Port: 80
  HTTPS Port: 443</code></p>
  
  <p>On Cloudfront I also have custom error responses for 400,403 and 404 all pointing to <code>/index.html</code> with code 200.</p>
  
  <p>Any ideas what am I doing wrong?</p>
  
  <p>error image:
  <a href="https://i.stack.imgur.com/ecfRV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ecfRV.png" alt="enter image description here"></a></p>
  
  <p>error image with no error handling on Cloudfront
  <a href="https://i.stack.imgur.com/sNvmZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sNvmZ.png" alt="enter image description here"></a></p>