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.

或（使用file：// link）

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

您正在遇到same-origin policy限制 - 您的脚本无法访问除加载它之外的任何其他域。

您可以尝试JSONP - 这是跨域获取数据的一种常见解决方案：
- http://www.chazzuka.com/blog/?p=221
- http://jquery-howto.blogspot.com/2009/04/twitter-jsonjsonp-api-url.html
您的代码看起来像这样（请注意在网址中添加了callback=?）：
```
$.getJSON("http://search.twitter.com/search.json?q=somequery&result_type=recent&count=9&callback=?", 
          {},
          function (data) {
                  $.each(data.items, doSomething2);  
     });
```
另一种选择是设置代理 - 您可以使用Apache httpd作为代理/反向代理来解决此限制。

Answer 2

将JQuery's JSONP callback添加到网址

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

Answer 3

不要使用此$.getJSON() 它不灵活.. 你可以使用

$.ajax({
    url:"test.json",
    dataTypr:"json",
    async:false
}).responseText;

这可以通过html编码轻松访问....

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

3 个答案: