Q&A
クッキー設定している処理の実際のコードは？
LaravelでAPIを作っていて、レスポンスにクッキーをつけて返そうとしてブラウザに保存させようとしていますが、うまく行っていません。
状況としては、LaravelでAPIのレスポンスにクッキーをつけ、Chromeの開発ツールのNetworkでみるとレスポンスにset-cookieとして値が表示されていて、
Cookiesのタブにもセットしたクッキーの一覧が表示されている
ページはvueで作っていて、ページのドメインは、
dev.example.com
apiのドメインは
api.example.com
なので、PHP側で設定しているクッキーのドメインは
example.com
にしています
path=/;
これで、Chromeの開発ツールのApplicationのStorage→Cookiesに表示されると期待した動きなのですが、ここに表示されません。
なので、ブラウザに保存されていないように思います。
レスポンスでcookieを返したので、ブラウザがそれを受け取って自動的にcookieとして保存させるものと思っていますが、ちがいますでしょうか？
jsでapiの応答を受け取って、レスポンスヘッダーについてるset-cookieをみて、jsがクッキーを保存する処理をする必要があるのでしょうか？
回答1件
0
ご指摘の状況で異なるホストからクッキーを設定するには、クッキーに以下のような設定をする必要があります（当初samesite=laxとしていましたが、samesite=noneが正しいです）。
Set-Cookie: foo=bar; path=/; secure; samesite=none;
secure属性とsamesite=lax属性の両方が必要です。結果として、API側は少なくともHTTPSでないと、クッキーの設定はできないことになります。
また、呼び出し側は、（もうされていると思いますが）XmlHttpRequestのwithCredentialsプロパティをtrueにする必要があります。
PHPでsamesite属性を設定する場合は以下の記事が参考になります。
投稿2020/12/23 04:50
編集2020/12/23 07:12
総合スコア11705
ありがとうございます！
path=/;
secure;
samesite=lax
がつくようにphp側を設定し、Chromeの開発ツールで上記のようにクッキーが返ってきてることは確認できたので、php側はOKだろう
、JS側もwithCredentialsをつけて、ちゃんとChromeの開発ツールで見ると、レスポンスヘッダのところにwithcredentials: trueと表示されていることを確認したので、呼び出し方はOK
だろうと。
しかし、ブラウザにクッキーが保存されないですね。
ページ、apiともにhttpsです。
ブラウザの設定はクッキーOKにしていて、他のサイトではクッキーが保存されることは確認できています。
適切に設定、実装されていれば、set-cookieのレスポンスをブラウザが受け取って自動的にブラウザにクッキーを保存してくれるものなのでしょうか？
また、今回通信してるのがjsでのAPIでの通信であり、ページ表示ではないのですが、APIでの非同期通信でもクッキーはセットされるものなのでしょうか？
すみません、samesite=none; が正しいです。間違えました
APIによる非同期通信でもクッキーはセットされますが、ブラウザの設定よってはセットされない場合もあります。ブラウザ上でサードパーティクッキーを禁止する設定にしてる場合はセットされません
ありがとうございます！
samesite=noneにして、ブラウザの設定を再度確認し、全て受け入れにしても保存されませんでした。
きっと私の見落としなんだろうと思いますので、頭を冷やして冷静になって再度見直してトライしてみようとおもいます。ありがとうございます。
手元の環境では、クッキー保存されますよ。おそらく設定がどこかおかしいのでしょうね。少し休むというのは良い判断かと思います
あなたの回答
tips
プレビュー
