GitHub Pagesツール

無料 CORS ヘッダージェネレーター

任意のオリジン、メソッド、認証情報の設定に対応するCORS HTTPヘッダーを生成します。

ツールを読み込み中...

CORS ヘッダージェネレーターとは

CORS（クロスオリジンリソース共有）はどのウェブオリジンがリソースにアクセスできるかを制御するブラウザのセキュリティメカニズムです。ブラウザアプリが異なるドメインからデータを取得しようとするとブラウザはレスポンスのCORSヘッダーをチェックします。正しいCORSヘッダーがないとクロスオリジンリクエストは失敗しコンソールにCORSエラーが表示されます。

クイックアンサー

CORSヘッダーはブラウザのJavaScriptからサーバーリソースにアクセスできるウェブサイトを制御します。Access-Control-Allow-Originで許可するオリジンをAccess-Control-Allow-MethodsでHTTP動詞をAccess-Control-Allow-Credentialsでクッキーベースの認証を指定します。ワイルドカードの*オリジンと資格情報を組み合わせないでください。

Last updated: 2026-05-28

制限事項

CORSはブラウザベースのリクエストのみを保護します。サーバー間のリクエスト、curl、直接API呼び出しはCORSの対象外です。CORSはサーバーのセキュリティ層ではなくブラウザの執行メカニズムです。
一部の古いブラウザ（IE 10以下）はCORSのサポートが不完全でプリフライトキャッシュを正しく処理できない場合があります。最新のウェブアプリではブラウザサポートは普遍的です。
CORSヘッダーはDDoS、不正使用、または不正な非ブラウザアクセスからAPIを保護しません。CORSと併せて認証、レート制限、WAFを使用してください。

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

使い方

許可するオリジンを入力します。公開APIの場合は*を使用し制限付きアクセスの場合は特定のドメインを使用します。
エンドポイントがサポートするHTTPメソッドとクライアントが送信する可能性のあるカスタムヘッダーを選択します。
資格情報のサポートは慎重に切り替えます。ブラウザは*オリジンと資格情報の組み合わせを拒否します。
デプロイ形式を選択し生成されたヘッダー設定をコピーします。

主な用途

任意のフロントエンドが任意のドメインから呼び出せる公開APIを設定します。
クッキーベースの認証を使用して自社のフロントエンドドメインのみがアクセスできるプライベートAPIエンドポイントを設定します。
Cloudflare WorkerやExpress.jsバックエンド用に適切なプリフライトキャッシュ付きのCORSヘッダーを生成します。

用途

使用例

例

公開読み取り専用API

公開JSON APIが任意のフロントエンドにデータを提供します。オリジンを*に設定しGETのみを許可し資格情報は有効にしません。これは公開データに対する最もシンプルで安全なCORS設定です。

例

認証クッキー付きプライベート管理API

admin.example.comの管理ダッシュボードがセッションクッキーでapi.example.comのAPIを呼び出します。オリジンをadmin.example.comに設定しGET/POST/PUT/DELETEを許可し資格情報を有効にしオリジンに*を決して使用しないでください。

よくあるミス

ワイルドカードオリジン（*）とAccess-Control-Allow-Credentials: trueを一緒に使用するとブラウザはこの組み合わせを拒否します。
リクエストオリジンに基づいて異なるCORSヘッダーを提供する場合Vary: Originを追加し忘れると問題が発生します。
Access-Control-Max-Ageを86400以上に設定してもブラウザは24時間で上限を設定します。

検証

ブラウザのDevToolsのNetworkタブを開きクロスオリジンリクエストを行いレスポンスヘッダーでAccess-Control-Allow-Originおよび関連ヘッダーを確認します。
curl -H 'Origin: https://example.com' -I https://your-api.com/endpoint でクロスオリジンリクエストをシミュレートしAccess-Controlヘッダーを確認します。

FAQ

CORS ヘッダージェネレーターのFAQ

正しいヘッダーがあるのにCORSエラーが出るのはなぜですか？

CORSエラーはネットワーク問題、開発時の自己署名証明書、またはサーバーに到達する前にブラウザがリクエストをブロックすることによっても発生します。ブラウザコンソールで具体的なCORSエラーメッセージを確認しプリフライトのOPTIONSリクエストが2xxステータスを返すことを確認してください。一部のサーバーフレームワークはデフォルトでOPTIONSに404または500を返します。

Access-Control-Allow-Originに*と資格情報を併用できますか？

いいえ。CORS仕様はワイルドカードオリジンと資格情報の組み合わせを明示的に禁止しています。ブラウザはレスポンスを拒否します。資格情報をサポートする必要がある場合は各オリジンを明示的にリストするか許可リストに対して検証した後リクエストオリジンを動的にエコーバックしてください。

CORSプリフライトリクエストとは何ですか？

プリフライトはリクエストが単純でない場合にブラウザが実際のリクエストの前に送信する自動OPTIONSリクエストです。リクエストはGET/HEAD/POST以外のメソッドを使用する場合Authorizationなどのカスタムヘッダーを含む場合またはapplication/x-www-form-urlencoded、multipart/form-data、text/plain以外のContent-Typeを使用する場合にプリフライトされます。プリフライトはサーバーが意図したリクエストを許可しているかどうかを確認します。