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){
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 source requires
var arr = [],
i=data.movies.length;
while(i--){
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
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?
source to share
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 ....
source to share
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.
source to share
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
source to share