こんにちは。KOUKIです。
とある企業でWeb系エンジニアをやっています。
最近仕事で、AWSのCloudFront + S3 + API Gatewayの環境構築を構築する機会があったのですが、下記のエラーに悩まされました。
1 2 3 4 5 6 |
This XML file does not appear to have any style information associated with it. The document tree is shown below. <Error> <Code>AccessDenied</Code> <Message>Access Denied</Message> <HostId>XXX</HostId> </Error> |
ちなみに、HTTPステータスコードは、403で返されます。
この問題の解決策を記述します。
<目次>
事象について
フロントエンドをVueJSで作成していて、S3に保存したファイルをCloudFrontから読み込み、API Gatewayに登録したエンドポイントに向けてリクエストを送ります。
その際に、ログインページや遷移先のページは表示されるのですが、ページをリロードしたりすると表題のエラーが発生する次第です。
根本原因
私の場合は、CloudFrontのエラーページ設定をしていないことが原因でした。
「CloudFront」 -> 「ディストリビューション」 -> 「CloduFrontのID」へアクセスし、「エラーページ」タブを開きます。
そこで、エラーになった時のレスポンスを設定できるので、下記のように設定します。
- HTTPエラーコード: 403:Forbidden
- 最低TTL(秒): 10
- レスポンスページのパス: /index.html
※設定により異なる。デフォルトルートオブジェクトに設定している値と合わせている - HTTPレスポンスコード: 200:OK
要するに、403エラーになった時のリダイレクト先を設定することで、事象を回避できた感じですね。
まとめ
正直、設定によって根本原因は異なると思います。
キャッシュとかS3のアクセス制限などなど、色々な原因が考えられるからです。
しかし、CloudFrontを設定する際にエラーページの設定も忘れないようにすれば、私のようにエラー地獄に陥ることを回避できますw
参考になれば、幸いです!
コメントを残す
コメントを投稿するにはログインしてください。