Question

我正在尝试将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);

                });

            }
        }
    });

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

Answer 1

作为安全问题，不允许跨浏览器调用查看^CORS，您必须创建代理，让代理调用跨域并返回结果，或者如果其他域支持的服务器可以使用jsonp

Answer 2

您似乎使用违反相同原始政策的无效网址。

您必须将AJAX请求发送到同一domain 这是你想要的真实网址，或者你只是从他们的网站上复制了它？！

wikipedia上的

Same origin policy：

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

Workarounds

Answer 3

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

有关详细信息，请参阅此http://www.yaldex.com/ajax-tutorial-4/BBL0020.html （请仅通过iframe部分）

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

Answer 4

使用typeahead 0.9.1

解决JSONP和跨域请求

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

Answer 5

很抱歉，上面的答案将返回403禁止腐烂的西红柿api，

将其更改为＆amp; callback =？而不是？回调=？它在localhost上适当地返回JSON对象

为什么我看到这个getJSON错误

5 个答案: