CORSでのCookieと認証の設定

認証情報の3つの要件

Cookieをクロスオリジンで送信するには、3つすべてが正しく設定されている必要があります。1つでも欠けるとCookieは暗黙的にドロップされます。

1. サーバー：Allow-Credentialsヘッダー

Access-Control-Allow-Origin: https://app.example.com
Access-Control-Allow-Credentials: true

認証情報が有効な場合、オリジンは*にできません。

2. クライアント：credentialsフラグ

// Fetch API
fetch("https://api.example.com/data", {
  credentials: "include",
});

// Axios
axios.get("https://api.example.com/data", {
  withCredentials: true,
});

3. Cookie：SameSiteとSecure属性

Set-Cookie: session=abc123; SameSite=None; Secure; HttpOnly; Path=/

• クロスオリジンCookieにはSameSite=Noneが必須（Chrome 80以降）。
• SameSite=Noneの場合Secureは必須。
• HttpOnlyはJavaScriptによるCookie読み取りを防止（セッショントークンに推奨）。

よくある失敗パターン

症状	原因
Cookieが送信されない	クライアントにcredentials: "include"がない
Cookie送信されるがレスポンスがブロック	サーバーにAllow-Credentials: trueがない
Cookieがまったく設定されない	SameSiteがNoneに設定されていない、またはSecureフラグがない
不透明レスポンス	オリジンが*で認証情報あり — ブラウザが暗黙的に拒否

デバッグ手順

1. ネットワークタブでSet-Cookieレスポンスヘッダーを確認。
2. アプリケーション > CookieでCookieが保存されたか確認。
3. 次のリクエストにCookieヘッダーが含まれていることを確認。
4. CORSレスポンスにAllow-Origin（特定）とAllow-Credentials: trueの両方が含まれていることを確認。