[解決済み] jQuery XML エラー ' 要求されたリソースに 'Access-Control-Allow-Origin' ヘッダーが存在しません'.

質問

私は個人的なプロジェクトで、以下の場所にある xml ファイルを読み込むことを楽しんでいます。 http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml にある xml ファイルを読み込んで、xml を解析し、それを使用して通貨間の値を変換したいと思います。

今のところ、XMLを読み取るためのかなり基本的な以下のコードを思いつきましたが、次のエラーが発生しました。

XMLHttpRequest は **** を読み込むことができません。要求されたリソースに 'Access-Control-Allow-Origin' ヘッダーがありません。 ヘッダが要求されたリソースに存在しません。オリジン 'http://run.jsbin.com'はアクセスを許可されていません。

$(document).ready( 
    function() {     
        $.ajax({          
            type:  'GET',
            url:   'http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml',
            dataType: 'xml',              
            success: function(xml){
                alert('aaa');
            }
         });
    }
);

私のコードには何も問題がないようなので、誰かが私のコードで何が間違っているのか、どのようにそれを修正すればよいのかを指摘してくれることを期待しています。

どのように解決するのですか？

への ajax 呼び出しができなくなります。 http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml に配置されたファイルから http://run.jsbin.com のため 同一生成元ポリシー .

ソースとして（別名 オリジン ) ページと ターゲット の URL が異なるドメインにある場合 ( run.jsbin.com と www.ecb.europa.eu を含む)、あなたのコードが実際に作ろうとしているのは クロスドメイン (CORS) リクエストではなく、通常の GET .

一言で言えば 同一生成元ポリシー でのサービスに対する ajax 呼び出しのみを許可すべきであると言っています。 同じドメイン でのサービス呼び出しのみを許可すべきであると述べています。

例

のページ http://www.example.com/myPage.html にあるサービスを直接要求することだけが可能です。 http://www.example.com のように http://www.example.com/api/myService . サービスが別のドメインでホストされている場合 (例えば http://www.ok.com/api/myService のように)、ブラウザは直接呼び出しを行いません（期待通り）。その代わり、CORS リクエストを作成しようとします。

短く言うと、異なるドメイン間で (CORS) リクエスト* を実行するために、ブラウザは。

• を含むことになります。 Origin ヘッダを含み (ページのドメインを値として)、通常通り実行します。
• の場合のみ サーバー レスポンス には、そのリクエストに対する 適切なヘッダ ( Access-Control-Allow-Origin は 一 そのうち ) が CORS リクエストを許可すると、ブラウズは呼び出しを完了します (ほとんど** HTML ページが同じドメインにある場合と同じ方法です)。
  • 期待されるヘッダーが来ない場合、ブラウザーは単にあきらめます (あなたに対して行ったように)。

<sub>* 上記は 簡単 リクエスト、例えば通常の GET のような単純なリクエストで、 派手なヘッダがない場合です。リクエストが単純でない場合 (たとえば POST と application/json をコンテンツタイプとする場合）、ブラウザはそれをしばらく保持し、それを実行する前に最初に OPTIONS リクエストをターゲット URL に送信します。上記のように、もしこの OPTIONS リクエストへのレスポンスが CORS ヘッダを含んでいる場合のみ、処理を続行します。この OPTIONS という呼び方で知られています。 プリフライト のリクエストに対応します。

** 私が言っているのは ほとんど と言っているのは、通常の呼び出しと CORS 呼び出しの間には他の違いがあるからです。重要なのは、一部のヘッダーが、たとえレスポンスに存在するとしても に含まれていない場合、レスポンスに存在してもブラウザに拾われないということです。 Access-Control-Expose-Headers ヘッダを表示します。</sub>

どのように修正するのですか？

単なるタイプミスですか？ JavaScriptのコードに、ターゲットドメインのタイプミスがあるだけの場合があります。確認はされましたか？もし、そのページが www.example.com にある場合は、通常の呼び出しを行うだけです。 www.example.com ! 他の URL、例えば api.example.com あるいは example.com または www.example.com:8080 は 異なる ドメインとみなされます。そう、ポートが違えば、それは異なるドメインなのです!

ヘッダを追加してください。 最も簡単な方法は を有効にする CORS を有効にする最も簡単な方法は、必要なヘッダを追加することです (たとえば Access-Control-Allow-Origin ) をサーバのレスポンスに追加します。(各サーバ/言語には、そのための方法があります - 。 はここでいくつかの解決策を確認します。 .)

最後の手段です。 サーバーサイドでサービスにアクセスできない場合、ミラーリングすることもできます (たとえば リバースプロキシ などのツールを使って）ミラーリングし、そこに必要なヘッダをすべて含めることができます。