Fixing the CloudFront 403 error on Vue, React...

When you deploy a "Single-Page Application" behind a CDN like Cloudfront without the proper configuration, chances are you'll get this kind of error:

<Error>
  <Code>AccessDenied</Code>
  <Message>Access Denied</Message>
  <RequestId>AVT4B78N2BV83XBE</RequestId>
  <HostId>
    fXhCjZUI+4KJ2mTmTY+m9kIk7qN7ZqNdggeXuWT5brTN5AQ7S1f19tJy2jcYGN7LQEoE4C0UgNw=
  </HostId>
</Error>

This can happen when you try to load directly a page other than your index, or simply when you reload one of the pages.

This is the case for Vue, React, Angular, etc...

Why?

This issue can occur when the deployed application is an SPA that uses the browser's history API in order to avoid adding "/#/" to the URL.

When you try to directly load the "/contact" URL of your application, for example, the CDN will request the "contact.html" file from your web server (or your S3 bucket in this case), except that this file doesn't exist, because it's your Javascript application that's supposed to parse the URL to find the right view to display.

Hence the error. And for Amazon S3, a file that doesn't exist results in an "AccessDenied" error, which isn't exactly self-explanatory...

In this case, if you're using a standard web server, you'll see your web server's default 404 page.

Solution

To fix this "AccessDenied" or 404 error, you simply need to add two small rules for the error pages of your Cloudfront distribution.

To do this, open your distribution, go to the "Error pages" tab, then click on "Create custom error response":

You'll then need to create two custom responses, one for the 403 error and one for the 404 error. Each time, select the "Customize error response" option and enter the same values as shown below:

This will redirect all errors to your javascript application, and you'll also be able to handle real 404 errors in case of a non-existent route!

PS: There's a good chance you'll need to invalidate the routes that previously showed this error, in order to fully resolve the issue.