Laravel+Vueログインできない問題
問題
Laravel + Vue 構成の SPA Webアプリケーションでログインできない事象が発生.
現象の詳細
- フロントエンド(Vue)からログインのエンドポイントに対するリクエストは問題なくステータスコード200となる
- 認証後のユーザー情報取得エンドポイント
api/me
でなぜか401 Unauthorized
になる - なお、POSTMAN では問題なく
api/me
からレスポンスが返ってくる
トライ1
環境の再構築.
docker, パッケージ, マイグレーションなどを再度クリーンな状態から再実施.
結果
ダメ. 特に変わらず
いける、いけないの境界は以下の模様
- ok
- bcc6bcb0033869594219050d9fd7047b0f88be91
- ng
- 7c1c7563cd6fafcea96acdf705e61c12be8e7fe8
トライすること
その1
Vue 側でログイン、Meそれぞれのリクエストを単発で行う処理を実装し試してみる。
たぶん、Meでこけると思うのでその場合は、何かが不足している。多分、取得したトークンを送っていないとかではなかろうか?
その2
エラーになってるミドルウェアの箇所を特定する。なんとなく EnsureFrontendRequestsAreStateful
が怪しそうな気がする。
トライすること
その1
ブラウザのクッキーをクリアして再度ログインをトライ後、Me にリクエストする。
期待値
たぶん、Me リクエストのタイミングで X-CSRF-TOKEN 送らないない。
その場合は、axios で X-CSRF-TOKEN の取得と送信ができていないことが原因。
結果
ログイン後、X-CSRF-TOKEN をリクエストヘッダに付与して Me にリクエストしていた。
そのため、X-CSRF-TOKEN の取得と送信は一見できていそう。
その2
Vue 側でログイン、Meそれぞれのリクエストを単発で行う処理を実装し試してみる。
たぶん、Meでこけると思うのでその場合は、何かが不足している。多分、取得したトークンを送っていないとかではなかろうか?
その3
エラーになってるミドルウェアの箇所を特定する。なんとなく EnsureFrontendRequestsAreStateful
が怪しそうな気がする。
csrf トークン取得するための /sanctum/scrf-cookie
のエンドポイントである CsrfCookieController::show
にブレイクポイントを張って以下の2パターンを実行。
- Postman から
/login
->/api/me
- login, me それぞれでブレイクポイントにかかる
- フロントから
/login
->/api/me
- 一度もブレイクポイントにかからない
以上から、CSRF トークンの取得と送付ができていないことが原因と思われる。
以下の手順を実施してみたが結果は変わらず。まあ、CORS 対応は不要なはずなので、今回の問題とは関係ないと言うことだと思う。
CORSとクッキー(別のサブドメインで実行する場合)
とりあえず改めてやったら問題なくできたので閉じる。