CORS チェッカーは、自身のサイトからのオリジン間要求(クロスオリジン要求)がターゲットサーバーによって許可されるかどうかをテストします。プリフライト (OPTIONS) 要求と実際の要求を実行し、許可 (ALLOWED) またはブロック (BLOCKED) の判定を報告するほか、Access-Control-Allow-Origin、Methods、Headers、Credentials を詳細に分析して、要求が失敗する原因を正確に突き止めます。
「CORS によってブロックされました」というエラーは、ブラウザ開発において最も混乱を招くエラーの一つです。ブラウザはコードに有用な情報を返さずに黙って要求を阻止するため、生の CORS ヘッダーを読み解くのは非常に面倒です。CORS チェッカーは、全体像を明確にします。ターゲット URL、HTTP メソッド、およびテストしたいオリジン(デフォルトは現在のページ)を入力してください。必要に応じて、送信予定のカスタム要求ヘッダー(content-type、authorization など)をリストアップすることもできます。ツールは、「単純な」要求でない場合に自動的に追加されるプリフライト OPTIONS 要求を実行し、続いて実際の要求を行い、関連するすべての CORS レスポンスヘッダーを解析します。その後、Allow-Origin が正しく設定されているか、Allow-Methods に使用メソッドが含まれているか、カスタムヘッダーが Allow-Headers にあるか、Allow-Credentials が認証フラグと一致しているかなど、合否判定の詳細を表示します。最終的な判定(ALLOWED または BLOCKED)は一目で分かり、チェックリストによってバックエンドで何を修正すべきかが正確にわかります。
単純でないメソッドやカスタムヘッダーによりプリフライト OPTIONS 要求が必要な場合を検出し、正しい Access-Control-Request-* ヘッダーを付けて自動的に実行します。
オリジンの一致、許可されたメソッド、許可されたヘッダー、認証情報の各 CORS ルールを個別に評価します。どのチェックで失敗したかが一目でわかります。
上部に大きな緑色の ALLOWED または赤色の BLOCKED バナーが表示されます。ヘッダーを読み込んで答えを探す必要はありません。
プリフライト要求と実際の要求の両方のレスポンスヘッダーをすべて表示し、CORS 関連ヘッダーをハイライトします。
現在のページだけでなく、任意のオリジンを装ってテストできます。サードパーティの統合がどのように処理されるかを確認するのに便利です。
プローブ(調査)は拡張機能のバックグラウンドから実行されるため、オリジン間要求の取得自体がホストページの CORS ポリシーによってブロックされることはありません。
コンソールに CORS エラーが表示された際、ツールを使用してバックエンドに不足している正確なヘッダーを確認できます。仕様書を読むよりずっと高速です。
新しいパブリック API を公開する前に、想定されるすべてのオリジン、メソッド、ヘッダーの組み合わせが機能することをツールでテストします。
サードパーティ API を統合する際、自身のオリジンと予定しているヘッダーでテストを行い、要求が正常に通ることを確認します。
Access-Control-Max-Age の値を確認して、ブラウザがプリフライト結果をどれくらいの期間キャッシュするかを知ることができます。ヘッダー変更後のテストに役立ちます。
開発、ステージング、本番の各 URL に対して同じ CORS テストを実行し、ユーザーが遭遇する前に環境固有の設定ミスをキャッチします。
DevSuite Pro のドックにある CORS アイコンをクリックします。URL、メソッド、オリジン、ヘッダーの入力欄があるパネルが開きます。
テストしたい API エンドポイントを貼り付け、HTTP メソッド(GET, POST, PUT, DELETE など)を選択します。
オリジンは現在のページがデフォルトです。別のオリジンをテストする場合は変更してください。カスタム要求ヘッダーはカンマ区切りで入力します。
ツールがプリフライト(必要な場合)と実際の要求を実行し、判定結果とチェック内容を表示します。
BLOCKED(ブロック)判定の場合、チェックリストがサーバーの応答に何が不足しているかを教えてくれます。バックエンドのヘッダーを修正して再テストしてください。
DevSuite Pro を無料でインストールして、ブラウザで 39 以上の開発者ツールを利用しましょう。