Why am I seeing this getJSON error

I'm trying to use the rottentomatoes movie API with the twitter 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){


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

                    q: $(this).val()
                }, function(data) {

                    //set this to true when your callback executes

                    //Filter out your own parameters. Populate them into an array, since this is what typeahead source requires
                    var arr = [],
                        arr[i] = data.movies[i].title

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

                    //trigger keyup on the typeahead to make it search

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




Any idea what is causing this error?


source to share

5 answers

As a security issue, cross browser calls are not allowed, see CORS, either you will need to create a proxy, ask your proxy for a cross domain and return the results, or if a server on another domain supports you can use JSONP



It looks like you are using the wrong url that violates the same origin policy.

You have to send an AJAX request for the same domain

Is this the real url you want, or just copied it from your website?

Same origin policy

on wikipedia :

When computed, the same origin policy is an important security concept for a number of browser-side programming languages ​​such as JavaScript. This policy allows scripts to be executed on pages originating from the same site to access other methods and properties without any specific restrictions, but prevents access to most methods and properties between pages on different sites ....




You are seeing this error because the Ajax request (mostly xhrXML) does not allow cross-domain communication. If you really want to access resources from a different domain, you can use a hidden iframe to get content from a different domain. It is really simple and used even before ajax input.

For more information you can read this http://www.yaldex.com/ajax-tutorial-4/BBL0020.html (Please only go to the iframe section)

But I warn you that some sites do not allow you to show content inside an iframe, like twitter. They have an X-Frame-Option in their header, which prevents their pages from being displayed inside an iframe. So, first check the title of your resource you are trying to retrieve using the iframe.



Solution for JSONP and cross domain requests using typeahead 0.9.1

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




Sorry, but the answer above returns 403 forbidden with rotten tomatoes api,

changing it to & callback =? but not? callback =? it returns JSON object appropriately to localhost



All Articles