CORS設定ジェネレーター
CORSのAccess-Control系HTTPヘッダーをGUIで設定し、HTTPヘッダー・Nginx・Express.js・Spring Boot形式でコードを生成。プリフライトリクエストにも対応する無料オンラインツール。
CORSのAccess-Control系ヘッダーをGUIで設定し、各種フォーマットで出力するツールです。
Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET, POST, OPTIONS Access-Control-Allow-Headers: Content-Type, Authorization Access-Control-Max-Age: 86400
// 詳細
CORSとは
CORS（Cross-Origin Resource Sharing）は、Webブラウザが異なるオリジン間でリソースを共有するための仕組みです。セキュリティ上の理由から、ブラウザはデフォルトで異なるオリジンへのリクエストを制限しています（同一オリジンポリシー）。CORSヘッダーをサーバー側で適切に設定することで、特定のオリジンからのアクセスを許可できます。
プリフライトリクエスト
ブラウザは、単純リクエスト（GET/POST with simple headers）以外のクロスオリジンリクエストを送信する前に、OPTIONSメソッドによるプリフライトリクエストを自動的に送信します。サーバーはこれに対してAccess-Control-Allow-MethodsやAccess-Control-Allow-Headersヘッダーで許可する内容を応答する必要があります。
セキュリティ上の注意点
Access-Control-Allow-Originに「*」（ワイルドカード）を指定すると全てのオリジンからのアクセスを許可しますが、Allow-Credentialsとの併用はできません。本番環境では、必要最小限のオリジン・メソッド・ヘッダーのみを許可することが推奨されます。
// FAQ
- CORSエラーが出るのはなぜですか？
- ブラウザの同一オリジンポリシーにより、異なるオリジン（ドメイン・ポート・プロトコルが異なる）へのリクエストがデフォルトでブロックされるためです。サーバー側で適切なAccess-Controlヘッダーを設定することで解決できます。
- Access-Control-Allow-Originに複数のオリジンを指定できますか？
- ヘッダー値に直接複数のオリジンを列挙することはできません。サーバー側でリクエストのOriginヘッダーを確認し、許可リストに含まれていれば動的にAccess-Control-Allow-Originを設定する実装が一般的です。
- Access-Control-Allow-Credentialsとは何ですか？
- trueに設定すると、クロスオリジンリクエストでCookieやHTTP認証情報を含めることができます。この場合、Allow-Originにワイルドカード（*）は使用できず、具体的なオリジンを指定する必要があります。
- Access-Control-Max-Ageとは何ですか？
- プリフライトリクエストの結果をブラウザがキャッシュできる時間（秒）を指定します。適切な値を設定することで、プリフライトリクエストの回数を減らしパフォーマンスを向上できます。
// 使い方
-
許可するオリジンを設定
ワイルドカード（*）または具体的なオリジンURLを入力します。
-
メソッドとヘッダーを選択
許可するHTTPメソッドやリクエストヘッダーをチェックボックスで選択します。
-
出力形式を選んでコピー
HTTPヘッダー・Nginx・Express.js・Spring Boot形式から選択し、生成されたコードをコピーします。