CORSとは？

CORS（クロスオリジンリソース共有）は、サーバーがブラウザーに対して、どの他のウェブサイトがそのレスポンスを読み取れるかを伝える仕組みです。デフォルトでは、https://app.example.com 上のJavaScriptからhttps://api.example.comへリクエストを送信できますが、APIがページのオリジンを指定するAccess-Control-Allow-Originヘッダー、または*を含むヘッダーを返さない限り、ブラウザーはレスポンスを表示しません。

単純なGETや基本的なフォームPOST以外のリクエスト（PUTやDELETE、またはAuthorizationヘッダーを含むJSON本文など）では、ブラウザーはまずプリフライトで許可を求めます。プリフライトとは、使用するメソッドとヘッダーを列挙したOPTIONSリクエストです。サーバーの応答で許可された場合に限り、本リクエストが送信されます。

ツールの説明

ページから呼び出すURL、ページのオリジン、メソッド、カスタムリクエストヘッダーを入力し、「CORSを確認」を押してください。当サービスはブラウザーと同じリクエストを送信し、応答に対してブラウザーのルールを適用します。

  • Access-Control-Request-MethodとAccess-Control-Request-Headersを含むプリフライト（OPTIONS）
  • 通常のレスポンスのCORSヘッダーを読み取るための、Originヘッダーを含むGET

チェック結果には、どのルールに合格または不合格となったかが表示され、表には両方の応答に含まれるすべてのCORSヘッダーが一覧表示されます。選択したメソッドが送信されることはないため、DELETEエンドポイントを確認しても何も削除されません。

このツールでは、cookiesを使ったリクエストが機能するかどうかも確認できます。その場合は*ではなく正確なオリジンを指定し、Access-Control-Allow-Credentials: trueを設定する必要があります。

Rapid Tool Set MCPサーバーに接続されたAIアシスタントは、cors_checkerとして同じチェックを実行できます。

ヒント

  • CORSエラーはサーバーではなくブラウザーが発生させます。curlやPostmanで機能するリクエストでも、これらのツールはCORSを適用しないため、ブラウザーではブロックされることがあります。
  • プリフライトへの応答が401または404の場合、サーバーはOPTIONSを通常のリクエストとして扱っています。認証チェックの前にプリフライトを許可してください。
  • リクエストごとに許可するオリジンをサーバーが選択する場合は、Vary: Originも返す必要があります。そうしないと、CDNがあるサイトへの応答を別のサイトに配信する可能性があります。