CORSエラー

この記事では、アプリケーションを介してリクエストに表示される可能性のある相互参照オリジン共有（CORS）エラーに関連する簡単な説明を提供します。

CORSとは何ですか？

CORSは、異なるオリジンからのリソースとの相互作用を可能にする標準です。同一生成元ポリシー（セキュリティメカニズム）に基づいて、あるオリジンからロードされたドキュメントまたはスクリプトが別のオリジンからのリソースと対話する方法を防止します。CORSが構成されていない場合は、コンソールのブラウザーにエラーが表示され、リクエストがブロックされました：「クロスオリジンリクエストがブロックされました：同一生成元ポリシーにより、$somesiteのリモートリソースの読み取りが禁止されています 」。

リクエストが同じ発信元からのものであるかどうかはいつわかりますか？ 2つのURLのプロトコル、ホスト、ポートが同じであれば簡単です。これは、 same-origin-policyへの準拠の例です。 https：// localhost：80 / index.html https：// localhost：80 / api / user / 75214にデータをリクエストするこれは、 same-origin-policyに準拠していない例です。 https：// localhost：80/index.htmlhttps://example.com:80/api/user/75214にデータをリクエスト

どのような種類のエラーが表示される可能性がありますか？

コンソールにCORSエラーが表示された場合、テキストの一部は理由 何が悪かったのかを示すメッセージ。次のリストは、最も一般的なCORSエラーについて説明しています。

1. CORS DISABLED

   理由：リクエストが試行されましたが、ブラウザでCORSが無効になっています。解決策：設定のブラウザに移動して、オプションcontent.cors.disablefalseを設定する必要があります。

2. CORSリクエストは成功しませんでした

   理由：ネット​​ワークまたはプロトコルレベルでHTTP要求が失敗します。プラグインまたは拡張機能が原因である場合や、2番目のオリジンの証明書が無効であることが原因である場合があります。解決策：リクエストを再試行して、プラグインと拡張機能を無効にします。 2番目のオリジンが利用可能であり、有効な証明書があるかどうかを確認してください。

3. CORSヘッダー「Origin」は追加できません

   理由：Webブラウザが必要なオリジンヘッダーをHTTPリクエストに追加できません。解決策：スクリプトが拡張権限で実行されていないかどうかを確認してください。

4. CORSリクエストの外部リダイレクトは許可されていません

   理由：リクエストは（元のオリジンではなく）別のオリジンにリダイレクトされます。解決策：サーバーのコードのURLを更新してください。

5. HTTPではなくCORSリクエスト

   理由：リクエストが有効なHTTP URL（file：/// URLなど）にリダイレクトされません。解決策：サーバーのコードでURLを確認してください。

6. CORSヘッダー「Access-Control-Allow-Origin」がありません

   理由：応答に Acces-Control-Allow-Originがありません header.Solution：リクエストのヘッダーにオリジンを追加します。 Access-Control-Allow-Origin：https://rackspace.com または、 *を使用できます 任意のサイトからのアクセスを許可します。

7. CORSヘッダー「Access-Control-Allow-Origin」が「xyz」と一致しません

   理由：応答に複数の Access-Control-Allow-Origin が含まれています .Solution：CORSリクエストが Access-Control-Allow-Originにオリジンを含めるように設定されていることを確認してください ヘッダーであり、 Access-Control-Allow-Originのみがあります ヘッダー。

8. CORSヘッダー「Access-Control-Allow-Origin」の場合、クレデンシャルはサポートされませんは'*'

   理由：CORSリクエストがクレデンシャルフラグを設定して試行されましたが、サーバーはAccess-Control-Allow-Originの値としてワイルドカード（ "*"）を使用して構成されており、クレデンシャルの使用が許可されていません。解決策： CORSリクエストを発行するときにcredentialsフラグの値がfalseであることを確認します。withCredentialsの値をfalseに設定するXMLHttpRequest。サーバー送信イベントは、EventSource.withCredentialsがfalse（デフォルト値）であることを確認します。FetchAPIを使用する場合は、Requestを確認します。 .credentialsは「省略」です。

9. CORSヘッダー「Access-Control-Allow-Methods」でメソッドが見つかりませんでした

   理由：HTTPリクエストのメソッドが Access-Control-Allow-Methodsのリストに含まれていません ヘッダ。
   解決策：必要なメソッドを使用してヘッダーを構成します： Access-Control-Allow-Methods：GET、HEAD、POST

10. CORSヘッダー「Access-Control-Allow-Credentials」で「true」が期待されます

    理由：サーバーの Access-Control-Allow-Credentials ヘッダーの値は、使用できるようにtrueに設定されていません。解決策：クライアント側で、次の構成を修正します。XMLHttpRequestでwithCredentialsの値をfalseに設定します。サーバー送信イベントは、EventSource.withCredentialsがfalse（デフォルト値）であることを確認します。 Fetch APIを使用する場合は、Request.credentialsが「省略」されていることを確認してください。サーバー側でこのエラーを排除するには、 Access-Control-Allow-Credentialsを設定します。 真の値。

11. CORSプリフライトチャネルが成功しませんでした

    理由：CORSリクエストが必要であり、プリフライトとプリフライトを実行できませんでした。クロスサイトリクエストはすでにプリフライトを実行しました。プリフライトリクエストでネットワークエラーが発生しました。解決策：コードが接続ごとに1回だけプリフライトすることを確認してください。

12. CORSヘッダー「Access-Control-Allow-Methods」の無効なトークン「xyz」

    理由：これは、CORSへの応答に Access-Control-Allow-Methodsが含まれている場合に発生します。 少なくとも1つは無効なヘッダーメソッドです。解決策： Access-Control-Allow-Methodsのすべてのメソッドを確認します。 有効なHTTPメソッドです。

13. CORSヘッダー「Access-Control-Allow-Headers」の無効なトークン「xyz」

    理由：これは、CORSへの応答に Access-Control-Allow-Methodsが含まれている場合に発生します。 少なくとも1つは無効なヘッダー名です。解決策： Access-Control-Allow-Headersのすべてのヘッダー名を確認してください。 無効または不明ではありません。

14. CORSヘッダー'Access-Control-Allow-Headersにトークン'xyz'がありません'CORSプリフライトチャネルから

    理由：このエラーは、 Access-Control-Allow-Headersで指定されたリストに含まれていないヘッダーをプリフライトしようとしたときに発生します。 header.Solution：サーバーを更新して、指定されたヘッダーを許可または回避する必要があります。
15. 複数のCORSヘッダー「Access-Control-Allow-Origin」は許可されていません 理由：複数の Access-Control-Allow-Origin ヘッダーはサーバーによって送信されました。解決策：ブラウザーは単一のオリジンまたはnullのみを受け入れるため、オリジンのリストを送信できないことをサーバーで確認してください。

結論

この記事では、Webサーバー内でCORSを使用しているときに発生する可能性のあるさまざまな種類のエラーと考えられる解決策について説明します。