Sanctum(Laravel) における Cookie認証 にて Access-Control-Allow-Origin ヘッダが返ってくる時と返ってこない時があった
API 開発において フロントエンド が バックエンド と Cookie認証 をしている場合、 POST 系のプリフライトリクエストに対して Access-Control-Allow-Origin が返ってくる時と返ってこない時があり、少し混乱したので表にまとめます。
ざっくり Access-Control-Allow-Origin ヘッダが返ってこない条件
- CloudFrontのヘッダポリシーでCORSの設定を行い、オーバーライドしている
- この場合はCloudFrontでのCORSの設定をオフ or オーバーライドしないようにすれば良い
- Laravel 側の config/cors.php が特定の条件を満たす場合
- 以下表にまとめる
フロントからCookieを送らない場合
| レスポンスの Access-Control-Allow-Origin ヘッダ | supports_credentials | allowed_origins |
|---|---|---|
Access-Control-Allow-Origin: * |
false |
['*'] |
Access-Control-Allow-Origin: フロントのオリジン |
false |
[フロントのオリジン] |
| ヘッダ自体返らない | false |
[当該しないオリジン] |
Access-Control-Allow-Origin: フロントのオリジン |
true |
['*'] |
Access-Control-Allow-Origin: フロントのオリジン |
true |
[フロントのオリジン] |
| ヘッダ自体返らない | true |
[当該しないオリジン] |
まとめ
allowed_origins に間違えてオリジンを設定していた場合など、リクエスト元のオリジンが allowed_origins に一致するオリジンがないと Access-Control-Allow-Origin ヘッダ自体が返らないようでした。
はじめ、1つのオリジンしか登録していなかったため、ちゃんと設定しているのにもかかわらずヘッダが返らないのは、何かブラウザのデフォルトの仕様なのかな？ と見当違いなところを調べてしまって時間がかかってしまったのでメモします。
ちなみに、初めてこの現象に遭遇した際、この CloudFront の CORS 関連のヘッダをオーバーライドしていたことも相まって、原因が複数存在したのでとても戸惑いました。笑
このメモが誰かの解決の手助けになれば幸いです。