Recevez AccessDenied lorsque vous essayez d'accéder à une page via l'URL complète de mon site Web
Pendant un certain temps, je stockais simplement le contenu de mon site Web dans un seau s3 et pouvais très bien accéder à toutes les pages via l'URL complète. Je voulais rendre mon site Web plus sécurisé en ajoutant un SSL, j'ai donc créé une distribution CloudFront pour pointer vers mon compartiment s3.
Le site se chargera très bien, mais si l'utilisateur essaie de rafraîchir la page ou s'il essaie d'accéder à une page en utilisant l'URL complète (c'est-à-dire www.example.com/home), il recevra une page AccessDenied.
J'ai une stratégie sur mon compartiment s3 qui restreint l'accès à l'identité d'accès d'origine uniquement et index.html est défini comme mon objet racine de domaine.
Je ne comprends pas ce qui me manque.
Pour faire une démonstration, n'hésitez pas à visiter mon site .
Vous remarquerez comment il vous redirige vers kurtking.me/home. Pour reproduire l'erreur, essayez d'actualiser la page ou accédez à une page via l'URL complète (par exemple, kurtking.me/life)
Toute aide est très appréciée car j'essaie de comprendre ce problème et de chercher des réponses depuis quelques jours.
Je l'ai compris et je voulais publier ma solution au cas où quelqu'un d'autre rencontrerait ce problème.
Le problème était dû au Angular étant un SPA (application à page unique) et à moi-même en utilisant un compartiment S3 pour le stocker. Lorsque vous essayez d'accéder à une page spécifique via un accès URL, CloudFront prend ( par exemple,/about) et accédez à votre compartiment S3 à la recherche de ce fichier. Parce que Angular est un SPA, ce fichier n'existe techniquement pas dans votre compartiment S3. C'est pourquoi je recevais l'erreur.
Ce que je devais faire pour le réparer
Si vous ouvrez votre distribution dans Cloudfront, vous verrez un onglet "Pages d'erreur". J'ai dû ajouter deux "réponses d'erreur personnalisées" qui traitaient 400 et 403. Les détails sont les mêmes pour 400 et 403, donc je n'inclus qu'une photo pour 400. Voir ci-dessous: 
Fondamentalement, ce qui se passe, c'est que vous dites à Cloudfront qu'indépendamment d'une erreur 400 ou 403, rediriger vers index.html, donnant ainsi le contrôle à Angular pour décider s'il peut aller sur le chemin Si vous souhaitez signaler au client une erreur 400 ou 403, vous devez définir ces routes en angulaire.
Après avoir configuré les deux réponses d'erreur personnalisées, j'ai déployé mes solutions cloudfront et wallah, cela a fonctionné!
J'ai utilisé ce qui suit article pour m'aider à me guider vers cette solution.
La meilleure façon de résoudre ce problème consiste à autoriser l'autorisation de compartiment de liste et à ajouter une règle personnalisée d'erreur 404 pour que cloudfront pointe vers index.html. Les erreurs 403 sont également renvoyées par WAF, et entraîneront des problèmes de sécurité supplémentaires, si elles sont ajoutées pour la gestion des erreurs personnalisée dans index.html. Par conséquent, mieux vaut éviter d'obtenir 403 erreurs de S3 en premier lieu pour les applications angular.
La réponse acceptée semble fonctionner mais elle ne semble pas être une bonne pratique. Vérifiez plutôt si l'origine cloudfront est définie sur S3 Bucket (dans lequel se trouvent les fichiers statiques) ou le s3 réel point de terminaison url . Il doit s'agir du point de terminaison de l'URL s3 et non du compartiment s3.
L'URL après le point de terminaison doit être l'origine
