REST API にアクセスすると「'Access-Control-Allow-Origin' ヘッダーがありません」というエラーが表示されるのはなぜですか?

応答に「Access-Control-Allow-Origin」ヘッダーがありません

CORS とプリフライトリクエストについて

クロスオリジンリソース共有 (CORS)ブラウザリクエストが、リクエスト元とは異なるオリジンからリソースにアクセスできるようにするメカニズムです。リクエストが別の発信元から行われた場合、ブラウザはサーバーにプリフライト OPTIONS リクエストを送信し、サーバーがリクエストを許可するかどうかを確認します。

質問に記載されているケースでは、ブラウザはプリフライト OPTIONS を送信しています。 HP ALM REST API へのリクエスト。ただし、サーバーが必要な CORS ヘッダーで応答しないため、「要求されたリソースに 'Access-Control-Allow-Origin' ヘッダーが存在しません。」というエラーが発生します。

問題の解決

この問題を解決するにはいくつかの方法があります:

CORS を使用するプロキシ:

CORS プロキシは、要求を宛先サーバーに転送し、必要な CORS ヘッダーを応答に追加します。これは、宛先サーバーを制御できない場合に便利です。

プリフライト リクエストの回避:

プリフライト リクエストを回避するには、リクエストがAuthorization ヘッダーや Content-Type ヘッダーは必要ありません。これは、代替の認証方法を使用するか、JSON データをクエリ パラメータとしてエンコードすることで実現できます。

ワイルドカードの問題の解決:

エラー「Access-Control-Allow」 -Origin ヘッダーはワイルドカードであってはなりません」は、サーバーが Access-Control-Allow-Origin ヘッダーの代わりにワイルドカード ('*') を指定した場合に発生します。要求元のクライアントの特定の発信元。これを解決するには、Access-Control-Allow-Origin ヘッダーをリクエスト元のオリジンに設定するようにサーバーを構成します。

JavaScript コードの修正

質問内の JavaScript コードには、いくつかの間違ったヘッダーがあります。プリフライトリクエストをトリガーしています:

headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');
headers.append('Access-Control-Allow-Credentials', 'true');

これらのヘッダーは、リクエスト。

以上がREST API にアクセスすると「'Access-Control-Allow-Origin' ヘッダーがありません」というエラーが表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。