CORS のエラー

オリジン間リソース共有 (Cross-Origin Resource Sharing) (CORS) は、サーバーが同一オリジンポリシーを緩和することができる標準規格です。例えば、サイトが埋め込み可能なサービスを提供する場合、このような制約を緩和する必要があるかもしれません。このような CORS の構成の設定は必ずしも簡単ではなく、いくらか冒険的です。これらのページでは、よくある CORS のエラーメッセージと解決方法を調査します。

CORS 構成が正しく設定されていないと、ブラウザーのコンソールには "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at $somesite" のようなエラーを表示して、リクエストが CORS のセキュリティ規則を侵害しているためにブロックされたことを示します。これは必ずしも設定ミスとは限りません。実際には、ユーザーのウェブアプリケーションおよびリモートの外部サービスからのリクエストが、意図的に許可されていない場合もあります。ただし、エンドポイントが使用可能である場合、成功するためにはデバッグが必要です。

問題の識別

CORS の構成に関する問題を理解するために、どのリクエストが、なぜ失敗したのかを調べる必要があります。そのためには以下の手順が役立つかもしれません。

  1. 問題のウェブサイトやウェブアプリを実行し、開発者ツールを開く。
  2. 失敗するトランザクションを再現してみて、コンソールで CORS 違反エラーメッセージが表示されるかを調べる。おそらく次のように見える。

CORS エラーを表示している Firefox コンソール

エラーメッセージのテキストは以下のようなものになるでしょう。

Cross-Origin Request Blocked: The Same Origin Policy disallows
reading the remote resource at https://some-url-here. (Reason:
additional information here).

メモ: セキュリティ上の理由から、 CORS リクエストで何を失敗したかについては JavaScript コードからは特定できません。コードから分かることは、エラーが発生したことだけです。何を失敗したかを特定するための唯一の方法は、詳細をブラウザーのコンソールで見ることです。

CORS のエラーメッセージ

Firefox のコンソールは、 CORS のためにリクエストが失敗した場合はコンソールにメッセージを表示します。エラーテキストには、何が失敗したのかの分析が追加された「reason」の部分があります。 reason のメッセージは以下の通りです。メッセージをクリックすると、エラーをより詳細に説明し、可能な解決方法を提供する記事を開くことができます。

関連情報