CORSヘッダービルダー

CORSヘッダービルダーは、仕様を暗記せずに正しいAccess-Control-* HTTPレスポンスヘッダーを 生成できる無料のブラウザベースツールです。Cross-Origin Resource Sharing（CORS）は、 ブラウザが異なるドメイン間で安全にリクエストを送信するための仕組みです。 CORSヘッダーの設定ミスは、フロントエンドで最もよく遭遇するエラーの一つであり、 適切なツールがあれば最も防ぎやすいものでもあります。

このビルダーでは、すべてのCORS関連ヘッダーをビジュアルフォームで設定できます： Access-Control-Allow-Origin（ワイルドカード、特定オリジンリスト、正規表現パターン）、 Access-Control-Allow-Methods、Access-Control-Allow-Headers、 Access-Control-Expose-Headers、Access-Control-Max-Age、 Access-Control-Allow-Credentials。オプションを切り替えるとリアルタイムで 出力が更新されるため、サーバーが送信すべき内容を正確に確認できます。 credentials: trueとワイルドカードオリジンの組み合わせなど、 よくある間違いについても警告を表示します。

出力は5つの形式で利用可能です：生のHTTPヘッダー、Nginxのadd_headerディレクティブ、 Apacheの.htaccessルール、Express.jsのcorsミドルウェアオプション、 Next.jsのnext.config.jsヘッダー。CORSヘッダーと併せてContent Security Policyを 設定する場合は、CSPヘッダージェネレーターをお試しください。 サーバーが送信するすべてのレスポンスヘッダーの詳細については、 HTTPヘッダーアナライザーで解析・説明が可能です。 Nginxのサーバーブロック全体を記述する場合は、 Nginx設定ジェネレーターでリバースプロキシ、SSL、 キャッシュディレクティブもカバーしています。

内蔵のプリフライトシミュレーションでは、ブラウザが送信するOPTIONSリクエストと 期待されるレスポンスを表示し、デプロイ前に設定を検証できます。

すべての処理はブラウザ内で完結します。内部APIのURLや本番ドメインを含め、 データがサーバーに送信されることはありません。

1. ドロップダウンからオリジンモードを選択します — ワイルドカード（*）、特定オリジン、または正規表現パターン。
2. 特定オリジンを選択した場合は、許可するオリジン（例：https://app.example.com）を入力してEnterキーを押すか**+**をクリックしてリストに追加します。
3. APIがサポートするHTTPメソッドをメソッドボタン（GET、POST、PUT等）をクリックして切り替えます。
4. 共通ヘッダーグリッドから許可リクエストヘッダーを選択し、下のテキスト入力にカスタムヘッダーを追加します。
5. 必要に応じて公開ヘッダーを入力し、プリフライトキャッシュのMax-Ageを設定し、APIがCookieや認証ヘッダーを使用する場合はCredentialsを切り替えます。
6. 出力形式（生ヘッダー、Nginx、Apache、Express.js、Next.js）を選択し、生成された設定を確認します。
7. CopyをクリックするかCtrl+Shift+Cを押して出力をクリップボードにコピーします。プリフライトシミュレーションを表示でOPTIONSリクエスト/レスポンスのペアを確認できます。