以下の条件を満たすアプリケーションでCookieを設定したい
- フロントサイト(ブラウザのナビゲーションバー)のURLとバックエンドのURLが異なる
- フロントサイトからはAjaxによるリクエストを送信し、サーバーは
REST API
を返却するSPAアプリケーションの構成
Ajaxリクエストのレスポンスで
Cookie
が設定できない。
Chrome
のデベロッパーツールを使用しても特にエラーは出力されないが、なぜか
Cookie
が設定されない。
時間のない方は結論の部分だけ設定してみて下さい。
以下を設定することでクロスサイトでCookieを設定する事ができる
XMLHttpRequest.withCredentials
に
true
を設定する[^1]
access-control-allow-credentials
に
true
を設定する[^2]
access-control-allow-origin
でフロントアプリケーションのURLを設定する[^3]
SameSite
ポリシーを
None
にする[^5]
XMLHttpRequestは
別のドメインからのCookieをデフォルトでは受付けていません。
ただし、withCredentialsにtrueを設定している場合、Cookieを受け付けることが出来ます。
また、この設定は同じサイトのリクエストには影響を与えません。
なので、開発環境だけクロスサイトになる様な環境でも特に考慮せずに利用できます。
Mozillaの解説
XMLHttpRequest from a different domain cannot set cookie values for their own domain unless withCredentials is set to true before making the request
リクエストに
Credentials
の設定が含まれている場合に、レスポンスを
JavaScript
に教えるかどうかを指示するもの
指定されたOriginからのリクエストを受け付けることが出来るかを表すもの
ただし、ワイルドカードを指定した場合は
Credentials
の設定はサポートされない[^4]
今回実験している中で分かったこととしては、サブドメインの場合に
Strict
を設定してもブラウザーにCookieを設定することは出来る。また、Cookieの送信も行われる。
トップレベルナビゲーションのURLとDomainが異なる場合、
None
のポリシーの場合しかCookieを設定することは出来ない。
Lax
と
Strict
はクロスサイトではブラウザーにCookieを設定することができないポリシーとなる。
[^1]
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials
[^2]
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials
[^3]
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin
[^4]
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials
[^5]
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite