2023.02.27  

【AWS】POSTのクエリパラメータが消える(CloudFront)

AWS,  Vue    

ブラウザからCloudFrontを経由してVueの管理画面に接続し、バックエンドのAPIを呼び出してログインするシステムについてのお話です。

ログイン時に必要な情報(ユーザー名やパスワードの情報)をクエリ文字列パラメータとしてPOSTに渡しても、APIに上手く渡せず消えてしまう事象が発生して困りました。

今回の記事はその際の対応についてのメモ書きです。

システム構成のイメージは次のようになります。

原因

CloudFrontのビヘイビアの設定でクエリ文字列パラメータが転送されないようになっていた為でした。

これはデフォルト設定です。

AWSのマニュアルには下記のように記載されています。

キャッシュキーとは何ですか?なぜそれが重要ですか?

まず、キャッシュキーが何であるか、どのように構成されているかを理解しましょう。キャッシュキーは、CloudFront がキャッシュするすべてのリソースを一意に識別する方法です。デフォルトでは、CloudFront ディストリビューションのホスト名と、次の例のように、リクエスト URL のリソース部分(パス、ファイル名、拡張子)で構成されます。

GET /content/stories/example-story.html?ref=0123abc&split-pages=false HTTP/1.1
Host: d111111abcdef8.cloudfront.net
User-Agent: Mozilla/5.0 Gecko/20100101 Firefox/68.0
Accept: text/html,*/*
Accept-Language: en-US,en
Cookie: session_id=01234abcd
Referer: https://news.example.com/

上記のリクエストのデフォルトのキャッシュキーには、次のものが含まれます。

CloudFront ディストリビューション (d1111abcdef8.cloudfront.net) のドメイン名 要求されたオブジェクトの URL パスとファイル名 (/content/story/example-story.html) デフォルトでは、ビューアリクエストのその他の値はキャッシュキーに含まれません。Webブラウザからの HTTP リクエストを考えてみましょう。デフォルトのキャッシュキーは上記の太字の項目で構成され、存在する他の要素(ヘッダー、クエリ文字列パラメータ、Cookie)は、キャッシュポリシーを使用してキャッシュキーに追加することによってのみ含まれます。

マニュアル:https://aws.amazon.com/jp/blogs/news/amazon-cloudfront-announces-cache-and-origin-request-policies/

対応

CloudFrontのビヘイビアの設定を変更します。

マネージメントコンソールでCloudFrontまで移動して編集対象のディストリビューションを選択します。

選択したら、「ビヘイビア」タブをクリックし、対象のビヘイビアを選んで「編集」ボタンを押下します。

「キャッシュキーとオリジンリクエスト」欄の「クエリ文字列」を「すべて」に変更します。

後は編集を完了するとクエリ文字列パラメータがバックエンドのAPIに届くようになります。

オブジェクトキャッシュについて

Use Origin Cache Headersとは何かというお話です。

オリジンのオブジェクトに指定されている Cache-Control: max-age または Cache-Control: s-maxage または Expires ヘッダの値をもとにキャッシュ時間を制御します。

これらのヘッダがオリジンのオブジェクトに存在しない場合は、デフォルトの 24 時間 が適用されます。

詳しくは下記サイトをご参照ください。

https://michimani.net/post/aws-about-cache-spec-of-cloudfront/

コメント
現在コメントはありません。
コメントする
コメント入力

名前 (※ 必須)

メールアドレス (※ 必須 画面には表示されません)

送信