CORSリクエストテスター

ブラウザから任意のAPIに実際のクロスオリジンリクエストを送り、CORSで許可されるか確認します。プリフライトが必要になる条件や、読み取れるヘッダーも表示します。

URL アドレス

メソッド

Content-Type

カスタムリクエストヘッダー

Cookie / 認証情報を送信（credentials: include）

「単純リクエスト」なのでプリフライトは不要ですが、このサイトに一致する Access-Control-Allow-Origin ヘッダーがレスポンスにある場合のみ内容を読み取れます。

リクエストはこのページのオリジン（https://algokit.dev）を持ってブラウザーから直接送信されます。Web サイト上のスクリプトとまったく同じ動作です。見えるのは CORS セーフリストのヘッダーと Access-Control-Expose-Headers に列挙されたヘッダーだけです。

CORSテスターとは？

このCORSテスターは、選択したメソッド、Content-Type、カスタムヘッダー、認証情報モードで、ブラウザから本物のクロスオリジンリクエストを送り、ブラウザがJavaScriptにレスポンスの読み取りを許可するかを報告します。送信前に、リクエストが「シンプル」か、OPTIONSのプリフライトが必要か、その理由も説明します。

CORSテスターの使い方

テストするAPIのURLを入力します。
メソッド、任意のContent-Type、Authorization: Bearer x のような任意のカスタムヘッダーを選びます。
アプリが credentials: include を使う場合は「Send cookies / credentials」にチェックを入れます。
プリフライトの説明を読んでから、Send test requestを押します。
許可された場合は、ステータスとJavaScriptから見えるヘッダーを確認します。ブロックされた場合は、ブラウザのコンソールで正確なCORSエラーを確認します。

CORSテスターを使うべき場面

公開APIをブラウザアプリから呼び出せるかの確認や、特定のヘッダーでCORSエラーを再現するときに使います。オリジンは常にhttps://algokit.devのため、自分のドメインのみを許可しているサーバーは正しくブロックと表示されます。正確に一致させるには、自分のサイトからテストしてください。ブラウザは理由を明かさないため、CORSの失敗とネットワークやTLSのエラーを区別することはできません。

CORSテスターの仕組み

このツールは、ページのオリジン（https://algokit.dev）から mode: "cors" で fetch() を呼び出します。皆さんのフロントエンドコードとまったく同じ動きです。プリフライトの説明はFetch標準に従っており、GET/HEAD/POST以外のメソッド、form-urlencoded、multipart/form-data、text/plain以外のContent-Type、またはカスタムヘッダーがあると、OPTIONSのプリフライトが発生します。ブラウザがレスポンスをブロックすると、汎用のTypeErrorが投げられ、理由は意図的に隠されるため、ツールはコンソールを確認するよう案内します。