APIベースで管理画面作っててBasic認証つけたらsafariで・・・


変なわかりにくいタイトルつけてしましました。

この問題が起きた経緯です。

  • 今風にヘッドレスで管理画面つくる フロントはVueでバックエンドはLaravel
  • ログインはJWTでやるよ! Authorization: Bearer xxxxxxでAxiosでおくるよ
  • 実装できたよ
  • 管理画面全体にセキュリティのためにBasic認証かけてほしいよ
  • .htaccessで管理画面領域だけかけたよ。APIにはかけてないよ (WebもAPIも同じドメイン)
  • safariだけ管理画面の挙動がおかしいよ

ってな感じになりました。

要は以下にかかれていることですね。↓

これは罠でした。
対処法は何かいいのがあるかもなのですが、ない場合、APIのトークンはAuthorizationを使わずカスタムヘッダー使うか、パラメータにいれるかですかね。やだやだ。

管理画面はBasic認証つけてとかなりがちなので、Vueとかでヘッドレスな開発をしている場合は、気をつけましょう。