← 機能一覧に戻る
Free

CORS チェッカー

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)は一目で分かり、チェックリストによってバックエンドで何を修正すべきかが正確にわかります。

ライブプレビュー
example.com
CORS Checker ✓ Testing complete
POST https://api.backend.com/users
Origin:https://app.example.com Headers:content-type,authorization
✓ Request would be ALLOWED
Checks
Allow-Origin matches https://app.example.com
Method POST is allowed
Request headers permitted by Allow-Headers
Preflight (OPTIONS) · 204 No Content
access-control-allow-origin: https://app.example.com
access-control-allow-methods: GET, POST, PUT, DELETE
access-control-allow-headers: content-type, authorization
access-control-max-age: 86400
主な機能

プリフライトの自動検出

単純でないメソッドやカスタムヘッダーによりプリフライト OPTIONS 要求が必要な場合を検出し、正しい Access-Control-Request-* ヘッダーを付けて自動的に実行します。

チェック項目別の内訳

オリジンの一致、許可されたメソッド、許可されたヘッダー、認証情報の各 CORS ルールを個別に評価します。どのチェックで失敗したかが一目でわかります。

明確な判定結果

上部に大きな緑色の ALLOWED または赤色の BLOCKED バナーが表示されます。ヘッダーを読み込んで答えを探す必要はありません。

ヘッダーの完全な検査

プリフライト要求と実際の要求の両方のレスポンスヘッダーをすべて表示し、CORS 関連ヘッダーをハイライトします。

カスタムオリジンのテスト

現在のページだけでなく、任意のオリジンを装ってテストできます。サードパーティの統合がどのように処理されるかを確認するのに便利です。

バックグラウンドで動作

プローブ(調査)は拡張機能のバックグラウンドから実行されるため、オリジン間要求の取得自体がホストページの CORS ポリシーによってブロックされることはありません。

主な活用例

「CORS によってブロックされました」エラーのデバッグ

コンソールに CORS エラーが表示された際、ツールを使用してバックエンドに不足している正確なヘッダーを確認できます。仕様書を読むよりずっと高速です。

API の CORS 設定の検証

新しいパブリック API を公開する前に、想定されるすべてのオリジン、メソッド、ヘッダーの組み合わせが機能することをツールでテストします。

サードパーティ統合のテスト

サードパーティ API を統合する際、自身のオリジンと予定しているヘッダーでテストを行い、要求が正常に通ることを確認します。

プリフライトキャッシュのデバッグ

Access-Control-Max-Age の値を確認して、ブラウザがプリフライト結果をどれくらいの期間キャッシュするかを知ることができます。ヘッダー変更後のテストに役立ちます。

クロス環境テスト

開発、ステージング、本番の各 URL に対して同じ CORS テストを実行し、ユーザーが遭遇する前に環境固有の設定ミスをキャッチします。

使い方
1

CORS チェッカーを開く

DevSuite Pro のドックにある CORS アイコンをクリックします。URL、メソッド、オリジン、ヘッダーの入力欄があるパネルが開きます。

2

ターゲット URL とメソッドを入力

テストしたい API エンドポイントを貼り付け、HTTP メソッド(GET, POST, PUT, DELETE など)を選択します。

3

オリジンとヘッダーを設定

オリジンは現在のページがデフォルトです。別のオリジンをテストする場合は変更してください。カスタム要求ヘッダーはカンマ区切りで入力します。

4

「Test CORS」をクリック

ツールがプリフライト(必要な場合)と実際の要求を実行し、判定結果とチェック内容を表示します。

5

確認と修正

BLOCKED(ブロック)判定の場合、チェックリストがサーバーの応答に何が不足しているかを教えてくれます。バックエンドのヘッダーを修正して再テストしてください。

試してみませんか? CORS チェッカー?

DevSuite Pro を無料でインストールして、ブラウザで 39 以上の開発者ツールを利用しましょう。

Chrome に追加 Edgeに追加 Firefox に追加