単一オリジンと認証情報の設定

特定オリジン + 認証情報

フロントエンドとAPIが異なるサブドメインにあり、APIがCookieやAuthorizationヘッダーを使用する場合、正確なオリジンを指定し認証情報を有効にする対象型CORSポリシーが必要です。

生成されるヘッダー

Access-Control-Allow-Origin: https://app.example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 3600
Vary: Origin

なぜワイルドカードではダメなのか？

ブラウザは厳格なルールを強制します：Access-Control-Allow-Credentialsがtrueの場合、Allow-Originヘッダーは*ではなく、リクエスト元の正確なオリジンでなければなりません。このルールに違反すると、ブラウザはサーバーサイドエラーなしにレスポンスをブロックします — デバッグが非常に困難なサイレントエラーです。

Varyヘッダー

サーバーが受信したOriginリクエストヘッダーに基づいてAccess-Control-Allow-Originを動的に設定する場合、レスポンスにVary: Originを必ず含めてください。CDNやブラウザキャッシュにオリジンごとに個別のキャッシュバージョンを保存するよう指示し、あるオリジンのCORSレスポンスが別のオリジンに配信されることを防ぎます。

Express.jsの例

const cors = require("cors");

app.use(cors({
  origin: "https://app.example.com",
  methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
  allowedHeaders: ["Content-Type", "Authorization"],
  credentials: true,
  maxAge: 3600,
}));

Cookieに関する考慮事項

Cookieをクロスオリジンで送信するには、3つの条件がすべて満たされている必要があります：サーバーがAllow-Credentials: trueを送信し、クライアントがfetch({ credentials: "include" })（またはXHRのwithCredentials: true）を設定し、CookieのSameSite属性がSecure付きのNoneに設定されていること。