CloudFrontで公開したSPAでページ遷移を行う時に、４０３エラーが返ってくる時の対処法

CloudFrontにてVue.jsで作成したSPAを公開してwindow.loactionなどでページ遷移を行うと以下のようなエラーが起きました。

<Error>
  <Code>AccessDenied</Code>
  <Message>Access Denied</Message>
  <RequestId>xxx</RequestId>
  <HostId>xxx</HostId>
</Error>

S3やCloudFrontでおなじみのエラーです。

ただ、今回のエラーはホーム画面は表示されるのにページ移動したら急にこのようなエラーが起きました。

また、this.$routerなどでページ遷移を行う時にはしっかりとページが表示されました。

this.$routerではページが表示される当たり、恐らくページを再描画するとどこか違うファイルを参照してしまうためこのようなエラーが起きているんだと思います。

何はともあれ、CloudFrontで次のように設定をしてあげるとこのエラーは解消されます。

「CloudFront」→「Error Pages」のタブを開いて「Create Custom Error Pages」をクリックしてください。

HTTP Error Code	403: Forbidden
Error Caching Minimum TTL	0
Customize Error Response	Yes
Response Page Path	/
HTTP Response Code	200: OK

無事ページを再描画してもページが表示されるようになりました！

以上、「CloudFrontで公開したSPAでページ遷移を行う時に、４０３エラーが返ってくる時の対処法」でした！

また、何か間違っていることがあればご指摘頂けると幸いです。

他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！

あと、最近「ココナラ」で環境構築のお手伝いをするサービスを始めました。

気になる方はぜひ一度ご相談ください！

Thank you for reading