为什么我看到这个 getJSON 错误答案

【问题标题】：Why am I seeing this getJSON error为什么我看到这个 getJSON 错误
【发布时间】：2012-03-31 20:56:58
【问题描述】：

我正在尝试将rottentomatoes movie API 与twitter's bootstrap typeahead plugin 一起使用，但我不断收到以下错误：

XMLHttpRequest cannot load http://api.rottentomatoes.com/api/public/v1.0/movies.json?apikey=MY_API_KEY&page_limit=5&q=t&format=jsonp. Origin http://localhost is not allowed by Access-Control-Allow-Origin.

我的代码如下所示：

    var autocomplete = $('#searchinput').typeahead()
    .on('keyup', function(ev){

        ev.stopPropagation();
        ev.preventDefault();

        //filter out up/down, tab, enter, and escape keys
        if( $.inArray(ev.keyCode,[40,38,9,13,27]) === -1 ){

            var self = $(this);

            //set typeahead source to empty
            self.data('typeahead').source = [];

            //active used so we aren't triggering duplicate keyup events
            if( !self.data('active') && self.val().length > 0){

                self.data('active', true);

                $.getJSON("http://api.rottentomatoes.com/api/public/v1.0/movies.json?apikey=API_KEY_REMOVED&page_limit=5",{
                    q: $(this).val()
                }, function(data) {


                    //set this to true when your callback executes
                    self.data('active',true);

                    //Filter out your own parameters. Populate them into an array, since this is what typeahead's source requires
                    var arr = [],
                        i=data.movies.length;
                    while(i--){
                        arr[i] = data.movies[i].title
                    }

                    //set your results into the typehead's source 
                    self.data('typeahead').source = arr;

                    //trigger keyup on the typeahead to make it search
                    self.trigger('keyup');

                    //All done, set to false to prepare for the next remote query.
                    self.data('active', false);

                });

            }
        }
    });

知道是什么导致了这个错误吗？

【问题讨论】：

可能相关：developer.mozilla.org/en/http_access_control

标签： javascript jquery twitter-bootstrap

【解决方案1】：

出于安全考虑，不允许跨浏览器调用，请参阅 ^CORS，要么您必须创建代理，让您的代理调用跨域并返回结果，或者如果其他域的服务器支持你可以使用jsonp

【讨论】：

看起来他们支持 jsonp。我可以简单地将这种格式添加到我的 getJSON 查询中吗？
@Paul 尝试将?callback=? 放在网址末尾，如果支持 jsonp，它应该可以工作
$.getJSON("http://api.rottentomatoes.com/api/public/v1.0/movies.json?apikey=API_KEY_REMOVED&page_limit=5?callback=?",{
Paul 的第一条评论表明它是受支持的，您是否尝试过第三条评论中的代码...我真的记性不好，现在不记得了...
试图插入 ?callback=?在控制台中给我一个GET 403 (Forbidden) 结果。

【解决方案2】：

您似乎使用了违反同源政策的无效网址。

您必须将 AJAX 请求发送到相同的 domain。
这是您想要的真实网址，还是您只是从他们的网站上复制的？！

Same origin policywikipedia:

在计算领域，同源策略是许多浏览器端编程语言（例如 JavaScript）的重要安全概念。该策略允许在源自同一站点的页面上运行的脚本无特定限制地访问彼此的方法和属性，但禁止跨不同站点的页面访问大多数方法和属性。
...

Workarounds

【讨论】：

【解决方案3】：

您看到此错误是因为 Ajax 请求（基本上是 xhrXML）不允许跨域通信。如果你真的想访问其他域的资源，那么你可以使用隐藏的 iframe 来从其他域获取内容。它非常简单，甚至在引入 ajax 之前就已经使用了。

有关更多信息，您可以阅读此http://www.yaldex.com/ajax-tutorial-4/BBL0020.html （请仅通过 iframe 部分）

但我提醒您，某些网站不允许您在 iframe 中显示内容，例如 twitter。他们的标头中有 X-Frame-Option，可防止在 iframe 中显示他们的页面。因此，首先检查您尝试使用 iframe 获取的资源的标头。

【讨论】：

【解决方案4】：

使用typeahead 0.9.1的JSONP和跨域请求解决方案

$('input.typeahead').typeahead [
    remote: {
        url: 'http://remote-server.com/results.json?query=%QUERY&callback=?',
        dataType: 'jsonp'
    },
    minLength: 2

【讨论】：

【解决方案5】：

抱歉，上面的答案返回 403 禁止使用烂番茄 api，

通过将其更改为 &callback=?而不是 ?callback=?它在 localhost 上适当地返回 JSON 对象

【讨论】：