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.

J'espère que cet article vous aura été utile, et à bientôt sur le blog !

À propos de l'auteur

Hello, je suis Nicolas Brondin-Bernard, ingénieur web indépendant depuis 2015 passionné par le partage d'expériences et de connaissances.

Aujourd'hui je suis aussi coach pour développeurs web juniors, tu peux me contacter sur nicolas@brondin.com, sur mon site ou devenir membre de ma newsletter pour ne jamais louper le meilleur article de la semaine et être tenu au courant de mes projets !

Photo par Ryan Franco sur Unsplash