从localhost或file://访问JSON服务

Question

我正在制作一个打算在PC上本地运行的html页面,最好不要运行本地服务器(file://).我也使用jQuery使操作/ AJAX更容易一些.

我试图从twitter API加载2个结果,但是我收到一个错误.代码如下:

$.getJSON("http://api.twitter.com/1/statuses/user_timeline.json?screen_name=someuser&count=9", {},
    function (data) {
        $.each(data.items, doSomething1);
    });
$.getJSON("http://search.twitter.com/search.json?q=somequery&result_type=recent&count=9", {},
    function (data) {
        $.each(data.items, doSomething2);
    });

我也尝试了以下代码,但它没有改变结果.

$.getJSON("http://api.twitter.com/1/statuses/user_timeline.json",
    {
        count:          "9",
        screen_name:    "someuser"
    },
    function(data) {
        $.each(data.items, updateAWTweets);
    });
$.getJSON("http://search.twitter.com/search.json",
    {
        q:              "somequery",
        result_type:    "recent",
        count:          "9"
    },
    function(data) {
        $.each(data.items, updateHashTagTweets);
    });

我在chrome中获得以下错误(在localhost服务器上):

XMLHttpRequest cannot load http://search.twitter.com/search.json?q=somequery&result_type=recent&count=9. Origin http://localhost:62153 is not allowed by Access-Control-Allow-Origin.

或(带文件://链接)

XMLHttpRequest cannot load http://api.twitter.com/1/statuses/user_timeline.json?screen_name=someuser&count=9. Origin null is not allowed by Access-Control-Allow-Origin.

有谁知道我怎么解决这个问题？

Answer 1

您正在遇到同源策略限制 - 您的脚本无法访问除加载它之外的任何其他域.

1. 您可以尝试JSONP - 这是跨域获取数据的一种常见解决方案:

   • http://www.chazzuka.com/blog/?p=221
   • http://jquery-howto.blogspot.com/2009/04/twitter-jsonjsonp-api-url.html

   您的代码看起来像这样(注意添加callback=?到URL):

   $.getJSON("http://search.twitter.com/search.json?q=somequery&result_type=recent&count=9&callback=?", 
             {},
             function (data) {
                     $.each(data.items, doSomething2);  
        });
   

2. 另一个选择是设置代理 - 您可以使用Apache httpd作为代理/反向代理来绕过此限制.

Answer 2

将JQuery的JSONP回调添加到URL

$.getJSON("http://search.twitter.com/search.json?callback=?", {