Corriger l'erreur 403 de Cloudfront sur Vue, React...

Lorsque vous déployez une "Single-Page Application" derrière un CDN comme Cloudfront sans la configuration appropriée, il y a des chances pour que vous receviez ce genre d'erreur :

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

Cela peut survenir lorsque vous essayez de charger directement une page différente de votre index, ou simplement de lorsque vous rechargez une des pages.

C'est le cas pour Vue, React, Angular, etc...

Pourquoi ?

Ce problème peut survenir lorsque l'application déployée est une SPA qui utilise l'API history du navigateur afin d'éviter d'ajouter des "/#/" dans l'URL.

Lorsque vous essayez de charger directement l'URL "/contact" de votre application par exemple, le CDN va demander le fichier "contact.html" à votre serveur web (ou votre bucket S3 en l'occurence), sauf que ce fichier n'existe pas, car c'est votre application Javascript qui est censé parser l'URL pour retrouver la bonne vue à afficher.

Donc erreur. Et pour Amazon S3, un fichier qui n'existe pas, c'est une erreur "AccessDenied", ce qui n'est pas le plus parlant...

En l'occurence, si vous utilisez un serveur web classique, vous verrez la page 404 par défaut de votre serveur web.

Solution

Afin de résoudre cette erreur "AccessDenied" ou encore 404, il suffit d'ajouter deux petites règles pour les pages d'erreur de votre distribution Cloudfront.

Pour celà ouvez votre distribution, affichez l'onglet "Page d'erreur" puis cliquez sur "Créer une réponses d'erreur personnalisée" :

Il faudra ensuite créer deux réponses personnalisées, une pour l'erreur 403 et une pour l'erreur 404. Choisissez à chaque fois l'option "Personnaliser une réponse d'erreur" et entrez-y les mêmes valeurs que ci-dessous :

Cela redirigera toutes les erreurs vers votre application javascript, et vous pourrez également gérer les vraies erreurs 404 en cas de route non-existante !

PS : Il y a de fortes chances pour que vous ayez besoin d'invalider les routes qui auront présentés cette erreur auparavant, afin de résoudre le problème entièrement.