やりたいこと

それはズバリ、トークン認証です。JWT ってやつです。

そのために、サーバーサイドで発行したトークンをフロントエンドに送り、cookie に保存したい。

そして、保存したトークンでセッション管理したい。

初めて cookie に触れるので、色んなところでハマりました。

同じように困ってる方がいたら、ぜひ参考にしてくれると幸いです。

フロントエンドに React を使っており、非同期通信に axios を使ってます。

サーバーサイドは Lumen(Laravel)です。

Axios の確認

GET や POST は正常に動作しており、レスポンスのデータもしっかりしています。 でも、cookie が保存されない。。。

header が足りてなくない？

そこで、 withCredentials: true をヘッダーに追加しなければいけないことを知りました。

axios.post(url, data, {
  withCredentials: true
})

こんな感じです。 しかし、まだ正常に cookie を送受信できません。 しかも、console に CORS のエラーが出ています。  withCredentials: true を追加する前は出ていなかったのに、追加したら出てきました。

API(サーバーサイド)の確認

CORS の設定が適当じゃない？

そこで、API サーバーの方の CORS 対策を再確認してみます。

$headers = [
	'Access-Control-Allow-Origin'      => '*',
	'Access-Control-Allow-Methods'     => 'POST, GET, OPTIONS, PUT, DELETE',
	'Access-Control-Allow-Credentials' => 'true',
	'Access-Control-Max-Age'           => '86400',
	'Access-Control-Allow-Headers'     => 'Content-Type, Authorization, X-Requested-With'
];

特に重要なのが Access-Control-Allow-Origin なのですが、 * (ワイルドカード)になってるし問題なさそう。

。。。と思っていたら、ここが問題だったのです。 どうやら、 withCredentials: true をヘッダーに追加した場合、 Access-Control-Allow-Origin にワイルドカードを使うのはダメみたいです。

フロントの URL が localhost:3100 だったので、

'Access-Control-Allow-Origin' => 'http://localhost:3100'

とすることで、無事に cookie が送受信できるようになりました。