jQuery XML エラー:「要求されたリソースに 'Access-Control-Allow-Origin' ヘッダーが存在しません」

を試行するとjQuery を使用して別のドメインにある XML ファイルにアクセスすると、「要求されたリソースに 'Access-Control-Allow-Origin' ヘッダーが存在しません。」というエラー メッセージが表示される場合があります。このエラーは、クロスオリジン AJAX 呼び出しを制限する同一オリジン ポリシーが原因で発生します。

同一オリジン ポリシーについて

同一オリジン ポリシーでは、次のことが強制されます。 Web ブラウザでは、リクエストを行う HTML ページと同じドメインでホストされているサービスへの AJAX 呼び出しのみが許可されます。指定された例では、HTML ページは http://run.jsbin.com/ でホストされ、XML ファイルは http://www.ecb.europa.eu/ に配置され、その結果、次のようなクロスオリジン リクエストが発生します。はブラウザによってブロックされています。

クロスオリジン リクエスト (CORS) の有効化

クロスオリジン リクエストを許可するには、サーバーは応答に適切なヘッダーを含める必要があります。これらのヘッダーの 1 つは Access-Control-Allow-Origin ヘッダーで、リソースへのアクセスが許可されるオリジンを指定します。

XML ファイルの場合、ECB のサーバーは必要な CORS を提供しません。ヘッダーがあるため、エラーメッセージが表示されます。これを解決するには、次のヘッダーを含むようにサーバーを構成する必要があります:

Access-Control-Allow-Origin: http://run.jsbin.com
Access-Control-Allow-Methods: GET
Access-Control-Allow-Headers: Content-Type

プリフライト リクエストに関する注意

単純でないヘッダーを使用して POST リクエストを行う場合など、特定のケースでは、ブラウザは、OPTIONS プリフライト リクエストを実行して、サーバーが特定のリクエストに対して CORS をサポートしているかどうかを判断する場合があります。このプリフライト リクエストに対するサーバーの応答に適切な CORS ヘッダーが含まれていない場合、メイン リクエストは同じエラー メッセージで失敗します。したがって、プリフライト リクエストとメイン リクエストの両方に対する応答に必要なヘッダーを含めることが重要です。