Question

I’m trying to use the rottentomatoes movie API with twitter’s bootstrap typeahead plugin but I keep getting the following error:

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.

My code looks like this:

    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);

                });

            }
        }
    });

Any idea what is causing this error?

Answer 1

As a security concern cross browser calls are not allowed see ^CORS, either you will have to create a proxy, have your proxy call the cross domain and return you the results, or if the server at the other domain supports you can use jsonp