CORS（オリジン間リソース共有）
フロントエンドをCDN(Content Delivery Network)から配信するなどの理由で、フロントエンドとバックエンドで異なるドメイン名を持つ場合があります。
ドメイン名が異なるとブラウザの同一オリジンポリシーによりアクセスが制限されてしまうため、CORSを使用します。
CORSに関連するHTTPレスポンスヘッダの設定例は次の通りです。
| HTTPレスポンスヘッダ | 設定する値 | 備考 |
|---|---|---|
Access-Control-Allow-Origin |
フロントエンドのURL | |
Access-Control-Allow-Methods |
GET、POST、PUT、DELETE、PATCH、OPTIONS |
プリフライトリクエストのためにOPTIONSを許可します |
Access-Control-Allow-Headers |
Content-Type |
アプリケーションに必要なヘッダを設定します |
Access-Control-Max-Age |
86400 |
単位が秒のため、この例では24時間となっています |
Access-Control-Allow-Credentials |
true |
Cookieを送信する場合はtrueにします |
Cookieの送信
先の表にあるように、CORSを使用しながらCookieを送信したい場合はHTTPレスポンスヘッダにAccess-Control-Allow-Credentials: trueを設定する必要があります。
また、前述のようにフロントエンドとバックエンドでドメイン名が異なる環境においてSet-CookieレスポンスヘッダでSameSite属性を使用する場合、値をNoneにする必要があります。
SameSite=Noneの場合はSecure属性が必須のため、Secure属性を付与してHTTPSで通信するようにします。
※ このドキュメントはFintan コンテンツ 使用許諾条項の下に提供されています。
※ このドキュメントに記載されている会社名、製品名は、各社の登録商標または商標です。