jquery - 如何从 facebook 页面墙获取 json 或 jsonp 而不会在 Chrome 中出现 mime 错误

Question

我看过诸如this one之类的帖子这表明您可以获取公共(public) Facebook 页面的 JSON 墙。但他们没有给出有效的例子。我尝试使用 $.ajax 和 jsonp 获取它，但在 Chrome 中出现 mime 错误，在 Safari 中出现不同的错误，在 FireFox 中出现另一个不同的错误。我错过了什么？

我创建了一个 jsFiddle HERE记录控制台，代码如下

 $.ajax({
      url: 'https://www.facebook.com/feeds/page.php?id=54971236771&format=JSON',
      type: 'get',
      dataType: 'jsonp',
      error: function (jqXHR, textStatus, errorThrown) {
           console.log('Problem with call to get list of articles\n',errorThrown);
      },
      success: function (data) {
           console.log('call success, data is\n', data);
      }
 });

Answer 1

当前浏览器禁止跨域 JSON 请求。 JSON 请求如下所示:

{ foo: 'bar' }

您获得的文件是纯 JSON，在当前所有浏览器中都是禁止的。但 JSONP 是允许的。 JSONP 看起来像:

mycallback({ foo: 'bar' });

当您的网址类似于 https://www.facebook.com/feeds/page.php?id=54971236771&format=JSON 时，结果就是 JSON。

要获取 JSONP，您需要使用 facebook API url，并且需要从 facebook 获取特殊的 facebook API token :

https://graph.facebook.com/54971236771/feed?access_token=YOUR-TOKEN-GOES-HERE

实际的 URL 将是这样的:

https://graph.facebook.com/54971236771/feed?access_token=YOUR-TOKEN-GOES-HERE&callback=jQuery110208932981239631772_1401824402598&_=1401824402599

完整代码如下:

$.ajax({
    url: 'https://graph.facebook.com/54971236771/feed?access_token=YOUR-TOKEN-GOES-HERE',
    type: 'get',
    dataType: 'jsonp',
    error: function (jqXHR, textStatus, errorThrown) {
        console.log('Problem with call to get list of articles\n', errorThrown);
    },
    success: function (data) {
        console.log('call success, data is\n', data);
    }
});