I'm trying to do an ajax GET call to get some information out of my database. Offline (trough localhost) everything works perfectly. Online I get the same error over and over again:
"No 'Access-Control-Allow-Origin' header is present on the requested resource." As you can see on following link: http://d.pr/i/pHR4
The javascript code:
function loadnewsong(){
var url = "http://www.sonder.be/?nextsong=true&id=" + $('#musicid').text();
$.ajax({
type:"GET",
url: url,
dataType:"json",
success: function(data){
console.log(data);
$('#title').fadeOut(function(){
$('#title').text(data[0].title);
$('#title').fadeIn();
});
$('#musicid').text(data[0].id);
audio.pause();
$('#srcmp3').attr('src',"assets/media/" + data[0].mp3);
$('#srcogg').attr('src',"assets/media/" + data[0].ogg);
audio.load();
audio.play();
url = "http://www.sonder.be/?nextsong=true&id=" + $('#musicid').text();
}
});
}
What can I possibly be doing wrong?
sonder.be
is asking the browser to get data from www.sonder.be
and www.sonder.be
isn't giving it permission to share that data with sonder.be
.
Since these are, presumably, different hostnames that point to the same site, you have wto simple approaches to fix this:
301
redirects for all resources on the other to it.Further reading: