title: How to setup CloudFront to have a custom error page per origin
body: <p>I'm trying to deploy an Angular Application on AWS using S3 and Cloudfront. Our Angular App is communicating on a Spring application serving as our backend app that is residing on an EC2 instance. I have already configured our CloudFront to redirect <code>/api</code> requests to our backend and everything else to the frontend. Right now, I've setup Cloudfront's custom error response for 403 and 404's to return our angular's index.html. <strong>The problem is that</strong> when our fontend tries to send and API call to our backend and returns a 404 with a valid json response, instead of receiving the json. We get the index.html file.</p>
  
  <p>What I'm trying to achieve is that if the user accesses <a href="http://somedomain.com/invalid-path" rel="noreferrer">http://somedomain.com/invalid-path</a>, they get served with the index.html but if they try to API call to  <a href="http://somedomian.com/api/v1/invalid-path" rel="noreferrer">http://somedomian.com/api/v1/invalid-path</a> they should get what the back-end server returns.</p>