01
呼び出し元のOriginを選ぶ
APIではなくフロントエンドのスキーム、ホスト、ポートを入力します。ローカル解析では仮のOriginを使えますが、ブラウザーGETではこのサイトのOriginに固定されます。
HTTP・リクエスト調査
CORSチェッカー届いた応答を読めるか確認
実際の応答ヘッダーと、必要ならOPTIONSの応答を貼り付けます。ネットワーク試験は手動です。
CORSチェッカー
実際のレスポンスヘッダー
OPTIONSレスポンスヘッダー（任意）
貼り付けたヘッダーはブラウザー内で解析し、送信しません。
結果
レスポンスヘッダーを貼り付けてください。
リクエスト条件
このOriginはローカル解析専用です。実際のGETはこのページのOriginを使います。
レスポンスヘッダーを貼り付けてください。
サーバーには200が記録されているのにfetchが失敗する場合、CORSチェッカーは「応答が届いた」と「JavaScriptが読める」を分けて調べます。
ローカルではOriginとメソッドを指定してヘッダーを解析します。CORS設定確認には、プリフライトが必要な条件ならOPTIONSの応答も追加してください。入力しただけでは外部へ接続しません。
CORSチェッカーを使う理由
通信成功と閲覧許可は別の判定です。
200でも読めない場合を示す
単純GETはサーバーに届いても、実際の応答に正しいAllow-OriginがなければJavaScriptへ渡されません。CORSチェッカーはステータスだけで成功と決めません。
OPTIONSの根拠を分離
JSON POSTやAuthorizationは先にプリフライトを起こします。最終応答だけでは通過したか不明です。OPTIONSのステータスと許可ヘッダーを足して、拒否された条件を見ます。
二段階の許可を追う
02
プリフライトの有無を見る
application/jsonや独自ヘッダーはOPTIONSを必要とすることがあります。名前だけを入力し、プリフライト判定を確認します。OPTIONS応答がなければ未検証です。
03
新しい結果だけを使う
入力を変えるとコピーとダウンロードが無効になります。自動解析は350ミリ秒待ちます。無効にした場合はボタンかCtrl/Cmd + Enterを使います。
ブラウザーの判断を項目別に表示
Originと認証情報を照合
Allow-Origin: *はcredentials: includeと両立しません。特定Originを返す場合もAllow-Credentials: trueが必要です。Authorizationヘッダーは認証情報スイッチとは別です。
メソッドとヘッダー名を検査
プリフライト確認ではOPTIONSの成功状態、Allow-Methods、Allow-Headersを読み、足りない項目を具体的に示します。
公開範囲とキャッシュを読む
Expose-HeadersとVary: Originを表示します。1件の応答だけで、サーバーが任意のOriginを反射しているとは断定しません。
明示したときだけGET
ブラウザーから認証情報なしのGETを送ります。HTTPエラーでも応答が読める場合はあります。fetchが拒否された場合、隠されたヘッダーは表示できません。
確認できる範囲と限界
- 貼り付けた内容はシミュレーション
- CORS判定シミュレーターの結論は提供されたヘッダーとOriginに限られます。対象APIを実測した証拠ではありません。必要なOPTIONS応答がなければ未検証とします。
- 実際のOriginは変更できない
- CORSチェッカーのブラウザーGETはこのページのOriginからのみ送れます。POSTやCookie、独自ヘッダー値は送りません。同一オリジンの成功をクロスオリジンの成功とは呼びません。
- プロキシや脆弱性スキャンはしない
- 任意のURLをサーバーから代理取得したり、複数Originを調べたりしません。Allow-Originの欠落だけで脆弱性や障害と判断しません。
- 見えないヘッダーは欠落とは限らない
- ブラウザーのスクリプトが読める応答ヘッダーは制限されます。表示されないフィールドも通信上は存在し得るため、完全な確認にはDevToolsを使います。
CORSチェッカーのよくある質問
サーバーが正常に応答したのに、なぜリクエストがCORSエラーで失敗するのですか?
サーバーが応答を返しても、ブラウザーがその応答をJavaScriptへ公開しないことがあります。実際のAllow-Originを確認し、必要な場合はOPTIONSの応答も別に確認してください。
シンプルリクエストとプリフライトリクエストの違いは何ですか?
単純GETは先に送られ、後で応答の読み取りが判定されます。JSON POSTや独自ヘッダーでは、最初にOPTIONSでOrigin、メソッド、ヘッダー名の許可を確認します。
ここでCORSヘッダーを確認すると、データがサーバーに送信されますか?
ローカルモードの貼り付け内容は送信しません。明示的にブラウザーGETへ切り替えて実行した場合だけ、認証情報なしのGETを対象へ送ります。
CORSはAPIを悪意あるリクエストから保護しますか?
いいえ。CORSはブラウザーのJavaScriptが読める応答を制御します。認証、認可、サーバー側の入力検証の代わりにはなりません。
なぜAccess-Control-Allow-Origin: * はcredentials: includeと一緒に使えないのですか?
認証情報付きの応答では、サーバーは一致する具体的なOriginとAllow-Credentials: trueを返す必要があります。Allow-Origin: *ではブラウザーが読み取りを拒否します。
ほかのケースも調べたいですか？