クロスオリジンでCookieを送信するにはCredentialsを設定する

クロスオリジン

でクライアントからサーバーにリクエストするときにCookieも一緒に送るにはCredentialsを有効にしないといけません。

サーバー

下記ヘッダーがtrueになるように設定します。

Access-Control-Allow-Credentials: true

クライアント

fetch('https://sample.com/api', {
  mode: 'cors',
  credentials: 'include'
});

そもそもクロスオリジンとは？

クロスオリジンとはWEBサイトのドメインとは異なるドメインに対してAPIを叩いたり、cssや画像などのリソースを取得する状況を言います。何も設定をしていない場合はセキュリティ面から異なるドメインへはアクセスできないようになっています。

そこで異なるドメインに対してリクエストを送ることができるようにするためにCORS（Cross Origin Resource Sharing）というものがあります。

CORSの設定はクライアントもサーバーもしないといけません。お互いが安全だと思える相手に対してアクセスコントロールすることが基本的な設定になります。

サーバー

ではMethod、Header、Origin、Credentialsが設定できます。

Method：GETやPOSTなどどのメソッドを許可するか設定できる
Header：リクエストヘッダーのどのヘッダーを許可するか設定できる
Origin：どこのドメインからのリクエストを許可するか設定できる
Credentials：リクエストに含まれるCookieの取得範囲を設定できる（同じドメインのみかクロスドメインでも可か）

クライアント

クライアントからはどこからアクセスするか明示的にサーバーに教える必要があるのでOriginを設定します。

Origin：クライアントのドメインを設定する
Credentials：上記で説明した通り、Cookieを送る設定になります。

この記事を書いた人
最新の記事

髙妻智一

2013年CyberAgent新卒入社スマホゲームを作る子会社に所属し、サーバーサイドのエンジニアを担当。２年目の終わりから新規子会社の立ち上げに参加し、サーバーサイドのエンジニアリーダーとしてサービースのリリースから運用までを担当。 2018年仮想通貨のスマホウォレットを提供するGinco Incにブロックチェーンエンジニアとして入社。