Search code examples
apache.htaccesshttp-headers

How to redirect 404 errors (and 403) to index.html with a 200 response


I am building a static website that uses JS to parse a URL in order to work out what to display.

I need every URL to actually open index.html where the JS can pull apart the path and act accordingly.

For example http://my.site/action/params will be parsed as an action with some parameters params.

Background, this will be served from AWS S3 via CloudFront using custom error redirection - and this works fine on AWS.

I am, however, trying to build a dev environment under Ubuntu running apache and want to emulate the redirection locally.

I have found a couple of pages that come close, but not quite.

This page shows how to do the redirect to a custom error page on the server housed in a file called "404". As 404 is the actual error response code, the example looks a bit confusing and I am having trouble modifying the example to point to index.html.

The example in the accepted answer suggests:

Redirect 200 /404
ErrorDocument 404 /404

which I have modified to:

Redirect 200 /index.html
ErrorDocument 404 /index.html

However this returns a standard 404 Not Found error page.

If I remove the Redirect line, leaving just the ErrorDocument line, I get the index.html page returned as required, but the https status response is still a 404 code where I need it to be a 200.

If I leave the Redirect line as per the example I actually get the same result as my modified version, so I suspect this is the line that is incorrect, but I can't figure it out.

(I'm using the Chrome Dev Tools console to see the status codes etc).


Solution

  • I think I have found a solution using Rewrite rules instead of error docs.

    RewriteEngine On
    
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
    

    The key I was missing in this approach seems to be not including an R=??? status response code at the end of the rewrite rule. It took me a while to find that!

    As it uses mod_rewrite rather than defining error pages I assume that the mechanism is different to how CloudFront does it, but for my dev system needs it seems that the result is the same - which means I can work on the site without having to invalidate the CloudFront cache after every code change and upload.