无法通过ajax调用从“数据库”获取数据“No'Access-Control-Allow-Origin'”

Question

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?

Answer 1

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:

1. Pick one of the two host names to be canonical and issue 301 redirects for all resources on the other to it.
2. Use relative URIs.

Further reading:

• The Same Origin Policy
• Ways to circumvent the same origin policy