CORSエラーデバッガー — 無料オンラインツール

クロスオリジンリソース共有エラーを診断し、10種類のバックエンドフレームワーク用のすぐに使える修正コードを取得できます。

CORSとは？

Cross-Origin Resource Sharing（CORS）は、Webページがそのページを提供したドメインとは異なるドメインへのリクエストを制限するブラウザのセキュリティメカニズムです。フロントエンド（例：https://myapp.com）が異なるドメイン（例：https://api.example.com）にAPI呼び出しを行うと、ブラウザはまずサーバーがそれを明示的に許可しているかどうかを確認します。

サーバーのレスポンスに適切なAccess-Control-Allow-Originヘッダーが含まれていない場合、ブラウザはリクエストをブロックし、CORSエラーをスローします。重要なのは、CORSはブラウザによって適用されるということです。リクエスト自体はサーバーに到達しますが、ブラウザがJavaScriptによるレスポンスの読み取りを防止します。

よくあるCORSエラー

  • 'Access-Control-Allow-Origin'ヘッダーがない：サーバーのレスポンスにCORSヘッダーが完全に欠けています。修正方法：サーバーのレスポンスにヘッダーを追加してください。
  • プリフライトリクエストが通過しない：カスタムヘッダーや非シンプルメソッド（PUT、DELETE）を使用するリクエストの場合、ブラウザはOPTIONSプリフライトリクエストを送信します。サーバーはこれに正しく応答する必要があります。
  • クレデンシャルフラグ：withCredentials: trueでCookieやAuthorizationヘッダーを使用する場合、サーバーはAccess-Control-Allow-Credentials: trueを返す必要があり、オリジンは具体的に指定する必要があります（*は使用できません）。
  • 許可ヘッダーの不一致：リクエストにAccess-Control-Allow-Headersに記載されていないヘッダーが含まれている場合、プリフライトは失敗します。

フレームワーク別のCORS修正方法

上のツールを使用して、バックエンドに合わせた正確な修正コードを生成できます。すべてのフレームワークに共通する基本原則は同じです：サーバーが適切なAccess-Control-Allow-*ヘッダーを返すように設定します。本番環境では、特に認証付きリクエストを扱う場合、ワイルドカード（*）の代わりに、許可するオリジンを正確に指定してください。

CORSに関するよくある質問

CORSエラーの原因は何ですか？

CORSエラーは、サーバーのレスポンスにAccess-Control-Allow-Originヘッダーがないため、ブラウザがクロスオリジンリクエストをブロックしたときに発生します。ブラウザは同一オリジンポリシーを適用しており、異なるドメイン、ポート、またはプロトコルからのリクエストはCORSプリフライトチェックをトリガーします。重要なのは、CORSはブラウザのみで適用されるということです。リクエスト自体はサーバーに到達しますが、ブラウザがJavaScriptによるレスポンスの読み取りを防止します。

Express.jsでCORSを修正するにはどうすればよいですか？

corsパッケージをインストールし（npm install cors）、すべてのオリジンを許可するにはapp.use(cors())を追加するか、正確なオリジンを指定します：app.use(cors({ origin: 'https://yourdomain.com' }))。CookieやAuthorizationヘッダーを使用するリクエストの場合は、credentials: trueを設定し、ワイルドカード（*）を許可オリジンとして使用しないでください。正確なドメインを指定する必要があります。

CORSプリフライトリクエストとは何ですか？

プリフライトは、カスタムヘッダーや非シンプルHTTPメソッド（PUT、DELETE、PATCH）を使用するクロスオリジンリクエストの前に、ブラウザが自動的に送信するHTTP OPTIONSリクエストです。サーバーはAccess-Control-Allow-MethodsとAccess-Control-Allow-Headersヘッダーに加えて、200または204ステータスでOPTIONSに応答する必要があります。プリフライトが失敗すると、実際のリクエストは送信されません。

なぜPostmanでは動作するのにブラウザでは動作しないのですか？

CORSはブラウザのセキュリティメカニズムであり、サーバー間通信やPostman、curl、RESTクライアントなどのツールには適用されません。Postmanは同一オリジンポリシーを適用せずにリクエストを直接送信するため、リクエストは成功します。ブラウザでは、サーバーがCORSヘッダーを通じて明示的に許可しない限り、JavaScriptはクロスオリジンレスポンスの読み取りが制限されます。

関連する開発者ツール