89

私は、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');
            }
         });
    }
);

私のコードに問題は見当たらないので、誰かが私のコードで何が間違っているのか、どうすれば修正できるのかを指摘してくれることを願っています。

4

2 に答える 2

163

同一生成元ポリシーにより、 にhttp://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xmlデプロイされたファイルからajax 呼び出しを行うことはできません。http://run.jsbin.com


ソース (別名origin ) ページとターゲットURL が異なるドメイン (run.jsbin.comおよび) にあるため、コードは実際には通常の ではなく、クロスドメイン (CORS)リクエストwww.ecb.europa.euを作成しようとしています。GET

簡単に言うと、同一生成元ポリシーは、ブラウザーがHTML ページの同じドメインでサービスへの ajax 呼び出しのみを許可する必要があることを示しています。


例：

のページは、 のような にhttp://www.example.com/myPage.htmlあるサービスのみを直接リクエストできます。サービスが別のドメイン (たとえば) でホストされている場合、ブラウザーは (ご想像のとおり) 直接呼び出しを行いません。代わりに、CORS リクエストを作成しようとします。http://www.example.comhttp://www.example.com/api/myServicehttp://www.ok.com/api/myService

簡単に言うと、異なるドメイン間で (CORS) リクエスト* を実行するには、ブラウザは次のようになります。

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


* 上記は、派手なヘッダーのない通常のリクエストなど、単純なリクエストの手順を示しています。GETリクエストが単純でない場合 ( POSTwith application/jsonas コンテンツ タイプなど)、ブラウザはそれをしばらく保持し、それを満たす前に、最初にOPTIONSターゲット URL にリクエストを送信します。OPTIONS上記と同様に、このリクエストへのレスポンスに CORS ヘッダーが含まれている場合にのみ続行されます。このOPTIONS呼び出しは、プリフライトリクエストと呼ばれます。 **通常の呼び出しと CORS 呼び出しには他にも違いがあるため、ほぼ
言っています。重要なのは、一部のヘッダーは、応答に含まれていても、ヘッダーに含まれていない場合、ブラウザーによって取得されないということです。Access-Control-Expose-Headers


修正方法は？

ただのタイプミスでしたか？場合によっては、JavaScript コードのターゲット ドメインにタイプミスがあるだけです。チェックしましたか？ページが にある場合、!www.example.comへの通常の呼び出しのみが行われます。orwww.example.comなどの他の URL は、ブラウザによって異なるドメインと見なされます。はい、ポートが異なる場合、それは別のドメインです!api.example.comexample.comwww.example.com:8080

ヘッダーを追加します。CORS を有効にする最も簡単な方法は、必要なヘッダー (としてAccess-Control-Allow-Origin) をサーバーの応答に追加することです。（各サーバー/言語にはそれを行う方法があります-ここでいくつかの解決策を確認してください。）

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

于 2013-11-06T20:12:54.590 に答える