【JavaScript入門】AJAXリクエスト時にCookieを設定してサーバーへ自動送信する方法

AJAXリクエストとCookieの基本的な仕組み

Web開発では、AJAXリクエストの実行時に特定のCookieをサーバーへ送信したいというケースがよくあります。「どうやってリクエストにCookieを紐付けるのか」と悩む方も多いかもしれませんが、実は特別な処理はほとんど不要です。

ここで押さえておきたい重要なポイントは、リモートサーバーへのすべてのAJAXリクエストには、開発者が何もしなくても、ブラウザが保持しているすべてのCookieが自動的に送信されるという点です。これはブラウザの標準的な動作であり、意識的に設定を追加する必要はありません。

したがって、私たちがやるべきことはシンプルです。JavaScriptを使ってdocumentオブジェクトに目的のキー（Cookie）を設定しておけば、あとはネットワーク通信が発生するたびに、そのCookieが自動的にリクエスト先のサーバーへ送られる仕組みになっています。

JavaScriptでCookieを設定する基本のコード

Cookieの設定は、document.cookieに「キー=値」の形式で代入するだけで完了します。以下がそのコード例です。

const token = 'some 323 very 535 random 5445 value';
document.cookie = `token=${token}`;

この1行だけで「token」という名前のCookieがブラウザに保存され、以降に行われるすべてのAJAXリクエストや通常のHTTPリクエストに自動的に含まれるようになります。

有効期限（expires）を指定したCookieの設定方法

デフォルトで設定されたCookieはセッション終了時に削除されますが、将来の特定の日時で失効するCookieを作成したい場合は、expires属性を追加します。

const token = 'some 323 very 535 random 5445 value';
const expiry = 'Wed, 4 Feb 2021 12:00:00 UTC';
document.cookie = `token=${token}; expires=${expiry}`;

このようにexpiresにUTC形式の日時を指定することで、その日時を過ぎるとCookieは自動的に無効化されます。複数の属性を指定する際は、各属性をセミコロン（;）で区切る点に注意してください。

まとめ

AJAXリクエストにCookieを送るための専用の実装は必要ありません。document.cookieでトークンなどの値をあらかじめ設定しておけば、以降のすべてのネットワークリクエストにおいて「token」Cookieが自動的にサーバーへ送信されます。認証トークンの管理などでもよく使われるテクニックなので、ぜひ覚えておきましょう。