JQueryを使用してリモートファイルを読み取る方法（およびjqXHR読み取り可能なエラーを取得する方法）

Question

リモートファイルを読み取ろうとしています。

var jqxhr = $.get('http://stackoverflow.com/feeds/question/10943544', function() { 
 
         alert('success'); 
 
         }) 
 
    .done(function() { 
 
        alert('second success'); 
 
        }) 
 
    .fail(function(jqXHR, textStatus, errorThrown) { 
 
        // alert('error'); 
 
        console.log('Error: (' + errorThrown + ')'); 
 
    }) 
 
    .always(function() { 
 
    alert('finished'); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

しかし、それは唯一の「失敗」と「常に」と私は理由を理解したいと思いトリガー;：私はthe example on the jquery.get() documentation pageを使用しています私の質問は：どのようにしてわかりやすいエラーを得ることができますか？現在のところ、console.log("Error: (" + errorThrown + ')');は、Error:()しか生じません。

ボーナスに関する質問：なぜ失敗するのですか？ JS/JQueryを使用してリモート（RSS）ファイルを読むにはどうすればよいですか？

Answer 1

問題は、ほとんどのAJAXリクエストに存在するSame Origin Policyのいずれかであり、セキュリティ手段として問題なく使用されています。 jqXHR()を見ると、readyStateが0であることがわかります。 readyStateは、要求が失敗した場合は常に0、ポリシーの制限または不正な要求の場合は常に0になります。制限が原因でエラーメッセージ自体がトリガされないため、errorメッセージは空白です。

var jqxhr = $.get("http://stackoverflow.com/feeds/question/10943544", function(res) { 
 
    alert("success"); 
 
    }) 
 
    .done(function() { 
 
    alert("second success"); 
 
    }) 
 
    .fail(function(jqXHR, textStatus, errorThrown) { 
 
    // alert("error"); 
 
    console.log("Error: (" + errorThrown + ')'); 
 
    }) 
 
    .always(function(jqXHR) { 
 
    console.log(jqXHR); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

この問題を回避するには、this answerにリストされているプラ​​グインの数があります。

バックエンドに独自のプロキシを作成して、プロキシが他のドメインのサービスを指し示すようにすることです。なぜなら、バックエンドではないためです同じ原産地政策の制約が存在する。次のスニペットに示されているよう

しかし、あなたがそれを行うことができないと仮定すると、最も簡単な方法は、CORS Anywhere proxyを利用することである（結果は通ってくるにはしばらくかかることに注意してください）：

$.ajaxPrefilter(function(options) { 
 
    if (options.crossDomain && jQuery.support.cors) { 
 
    var http = (window.location.protocol === 'http:' ? 'http:' : 'https:'); 
 
    options.url = http + '//cors-anywhere.herokuapp.com/' + options.url; 
 
    //options.url = "http://cors.corsproxy.io/url=" + options.url; 
 
    } 
 
}); 
 

 
$.get(
 
    'http://stackoverflow.com/feeds/question/10943544', 
 
    function(response) { 
 
    console.log("> ", response); 
 
    $("#viewer").html(response); 
 
    } 
 
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

この情報がお役に立てば幸い！ :)