I've got a static website setup with S3 and CloudFront. When I navigate to a subfolder like example.com/nonexistant/, my example.com/index.html page loads (as I want it to), however it's text only and all of my intrasite links get messed up.
For example, my logo is located at example.com/img/logo.png. When I navigate to example.com/nonexistant/, the html for example.com/index.html loads, however it now looks for my logo at example.com/nonexistant/img/logo.png.
So links like <img src="img/logo.png"> are breaking because it is starting the search for the file from the wrong directory.
Is there a solution where I can fix something in my Redirection rules to have all pages ending in / redirect to example.com? I know I could probably just go edit my code to have all paths just appear as <img src="https://www.example.com/img/logo.png">, but I'm wondering if there is an easier fix here.
EDIT: I've already set up in CloudFront to have 404s go to /index.html with status code 200, and have in S3 set up my error document as index.html
Change your links to absolute paths, without the hostname.
<img src="/img/logo.png">
S3 redirect rules can only match the key prefix -- the left-anchored part of the string, so they can't be used to address this.
You could also use a Lambda@Edge function in an origin response trigger, if you really wanted to redirect 404 responses for paths ending in / back to the main page, but a redirect rewrites the path in the address bar (by definition -- otherwise, it is not a "redirect"), and I assume since you are doing the 404-to-200 transformation then you are probably doing something like an SPA where you need the path to remain the same, despite index.html being displayed.