如何使用 JQuery 读取远程文件（并得到 jqXHR 可读错误）

Question

我正在尝试读取远程文件；我正在使用 the example on the jquery.get() documentation page :

    var jqxhr = $.get( 'http://whosebug.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>

但它只会触发 "fail" 和 "always"，我想了解原因；我的问题是：如何获得可读错误？ 目前，console.log("Error: (" + errorThrown + ')'); 仅产生 Error: ()。

奖励问题：为什么会失败？ 如何使用 JS/JQuery 读取远程 (RSS) 文件？

Answer 1

您的问题是 Same Origin Policy 中的一个，大多数 AJAX 请求都存在该问题，并作为安全措施实施。如果您查看 jqXHR()，您可以看到 readyState 是 0，表明了这一点。请注意，当请求失败时，readyState 将始终为 0，无论是由于策略限制还是格式错误的请求。 error 消息为空，因为限制阻止错误消息本身触发。

var jqxhr = $.get("http://whosebug.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 中列出了一些插件。它还指出：

The best way to overcome this problem, is by creating your own proxy in the back-end, so that your proxy will point to the services in other domains, because in the back-end not exists the same origin policy restriction.

但是，假设您不能这样做，最简单的方法是使用 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://whosebug.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>

希望对您有所帮助！ :)

如何使用 JQuery 读取远程文件（并得到 jqXHR 可读错误）

How to read a remote file with JQuery (and get a jqXHR readable error)

javascript

jquery

jqxhr