CORS設定ジェネレーターの概要・基礎知識
CORS（Cross-Origin Resource Sharing）は、Webブラウザのセキュリティ機構である「Same-Origin Policy（同一オリジン制限）」を緩めて、異なるドメイン間のリソース共有を許可する仕組みです。フロントエンドを https://app.example.com 、APIサーバーを https://api.example.com のように別ドメインで運用する現代的なWeb構成では、CORS設定を正しく行わないとブラウザコンソールに「CORSエラー」が表示され、APIアクセスが失敗します。本ツールはサーバー環境（nginx／Apache／Express.js／Flask／Spring Boot／.htaccess）に応じて、コピペで動くCORS設定コードを生成します。
CORSで使う主要レスポンスヘッダー
| ヘッダー名 | 役割 |
|---|---|
| Access-Control-Allow-Origin | 許可するオリジン（* または具体URL） |
| Access-Control-Allow-Methods | 許可するHTTPメソッド（GET、POST、PUT等） |
| Access-Control-Allow-Headers | 許可するリクエストヘッダー（Authorization等） |
| Access-Control-Allow-Credentials | Cookie送信を許可するか（true 指定時 * は不可） |
| Access-Control-Max-Age | プリフライト結果のキャッシュ秒数（86400=24時間） |
使い方の流れ
- Step 1で使っているサーバー環境を選びます（nginx、Apache、Express.js、Flask、Spring Boot、.htaccessから1つ）。
- Step 2で許可するオリジンを入力します。複数ある場合は改行で区切り、全許可なら「全オリジン許可（*）」をオンにします。
- Step 3で許可するHTTPメソッドにチェックを入れます。REST APIならGET/POST/PUT/DELETE/PATCH/OPTIONSが定番です。
- Step 4で許可するヘッダーを指定します。Content-TypeとAuthorizationはほぼ必須なので、プリセットボタンで素早く追加できます。
- Step 5でCredentials許可（Cookie送信）とMax-Age（プリフライトキャッシュ秒数）を設定し、「生成する」を押します。出力されたコードをサーバー設定ファイルに貼り付ければ完了です。
こんな場面で使う
- SPA + API構成：React／Vue／NextのフロントエンドとExpress／Flask／Rails APIを別ドメインで動かすときの初期設定に使えます。
- 本番／ステージング切り替え：本番は
https://app.example.comのみ、ステージングはhttps://stg.example.comなど、環境ごとに異なるオリジンを許可するコードを瞬時に生成できます。 - 外部APIサービス公開：自社APIを公開し、サードパーティのWebサイトから呼び出してもらうための設定に使えます。
- WebHook受信エンドポイント：Stripe・GitHub・Slackなどから直接POSTを受ける場合のCORS不要な構成と、ブラウザ経由で必要な構成を切り分けて設計できます。
- WordPress REST API：.htaccessにCORSヘッダーを追加して、外部サイトからWP REST APIへアクセス可能にする場合に便利です。
使う前に知っておきたい注意点
Access-Control-Allow-Origin: *とAllow-Credentials: trueは併用できません。Cookieや認証情報を送る場合は具体的なオリジンを指定してください。- CORSはブラウザによる制限であり、サーバー側のセキュリティ機能ではありません。ブラウザ以外（curl、Postman、サーバー間通信）からのアクセスは制限されません。認可・認証は別途実装が必要です。
- OPTIONSリクエスト（プリフライト）はブラウザが自動で送信します。サーバーはOPTIONSにも正しいCORSヘッダーを返さなければ本リクエストが失敗します。
- 本ツールの生成コードは標準的な構成例です。プロジェクトのセキュリティ要件に合わせて、許可オリジンを最小限に絞ることを強く推奨します。
- nginxの場合、
add_headerはステータスコード4xxや5xxのレスポンスには付与されないことがあります。always指定が必要なケースもあるためご注意ください。
用語の補足
- オリジン：プロトコル＋ドメイン＋ポート番号の組み合わせ。
https://example.comとhttp://example.com、example.com:8080はすべて別オリジンです。 - シンプルリクエスト：GET/POST（限定ヘッダーのみ）。プリフライトなしで送られます。
- 非シンプルリクエスト：PUT/DELETE/PATCHや、カスタムヘッダー付きのリクエスト。事前にOPTIONSのプリフライトが送信されます。
