このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
CORS のエラー
オリジン間リソース共有 (Cross-Origin Resource Sharing) (CORS) は、サーバーが同一オリジンポリシーを緩和することができる標準規格です。例えば、サイトが埋め込み可能なサービスを提供する場合、このような制約を緩和する必要があるかもしれません。このような CORS の構成の設定は必ずしも簡単ではなく、いくらか冒険的です。これらのページでは、よくある CORS のエラーメッセージと解決方法を調査します。
CORS 構成が正しく設定されていないと、ブラウザーのコンソールには"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at [some site]" のようなエラーを表示して、リクエストが CORS のセキュリティ規則を侵害しているためにブロックされたことを示します。これは必ずしも設定ミスとは限りません。実際には、ユーザーのウェブアプリケーションおよびリモートの外部サービスからのリクエストが、意図的に許可されていない場合もあります。ただし、エンドポイントが使用可能である場合、成功するためにはデバッグが必要です。
問題の識別
CORS の構成に関する問題を理解するために、どのリクエストが、なぜ失敗したのかを調べる必要があります。そのためには以下の手順が役立つかもしれません。
エラーメッセージのテキストは以下のようなものになるでしょう。
Cross-Origin Request Blocked: The Same Origin Policy disallowsreading the remote resource at https://some-url-here. (Reason:additional information here).
メモ:セキュリティ上の理由から、 CORS リクエストで何を失敗したかについてはJavaScript コードからは特定できません。コードから分かることは、エラーが発生したことだけです。何を失敗したかを特定するための唯一の方法は、詳細をブラウザーのコンソールで見ることです。
CORS のエラーメッセージ
Firefox のコンソールは、 CORS のためにリクエストが失敗した場合はコンソールにメッセージを表示します。エラーテキストには、何が失敗したのかの分析が追加された "reason" の部分があります。 reason のメッセージは以下の通りです。メッセージをクリックすると、エラーをより詳細に説明し、可能な解決方法を提供する記事を開くことができます。
- Reason: CORS disabled
- Reason: CORS request did not succeed
- Reason: CORS header 'Origin' cannot be added
- Reason: CORS request external redirect not allowed
- Reason: CORS request not http
- Reason: CORS header 'Access-Control-Allow-Origin' missing
- Reason: CORS header 'Access-Control-Allow-Origin' does not match 'xyz'
- Reason: Credential is not supported if the CORS header 'Access-Control-Allow-Origin' is '*'
- Reason: Did not find method in CORS header 'Access-Control-Allow-Methods'
- Reason: expected 'true' in CORS header 'Access-Control-Allow-Credentials'
- Reason: CORS preflight channel did not succeed
- Reason: invalid token 'xyz' in CORS header 'Access-Control-Allow-Methods'
- Reason: invalid token 'xyz' in CORS header 'Access-Control-Allow-Headers'
- Reason: missing token 'xyz' in CORS header 'Access-Control-Allow-Headers' from CORS preflight channel
- Reason: Multiple CORS header 'Access-Control-Allow-Origin' not allowed