クロスオリジン
でクライアントからサーバーにリクエストするときに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を送る設定になります。
関連記事
The following two tabs change content below.
髙妻智一
2013年CyberAgent新卒入社
スマホゲームを作る子会社に所属し、サーバーサイドのエンジニアを担当。2年目の終わりから新規子会社の立ち上げに参加し、サーバーサイドのエンジニアリーダーとしてサービースのリリースから運用までを担当。
2018年仮想通貨のスマホウォレットを提供するGinco Incにブロックチェーンエンジニアとして入社。
最新記事 by 髙妻智一 (全て見る)
- Polkadot(Substrate)のアドレスとトランザクションについて - 2023-03-09
- 【無料公開】「Goで始めるBitcoin」3章 Bitcoinノードとの通信 技術書典8 - 2020-03-08
- エンジニアがゼロから技術ブログを書くための方法をまとめました - 2019-05-25
コメントを残す