Question

I’m using the following code in order to make an ajax call to my server.
The code makes the call to the server and in return, it gets a list of all the friends that use the same app.

FB.getLoginStatus(function(response) {
  if (response.session) {
        uid = response.session.uid;
        access_token = response.session.access_token;
        $.getJSON(serverLink+"ajax.php?action=getFriendsApp", {token:access_token}
         ,function(data){
         var temp = data;
         if(true){
                var container = $('#friends_part_main');
                var fp = $('#friends_part');
                fp.show();
                var friends = data;
                for(var i in friends){
                    container.append('<a target="_blank" href="http://www.facebook.com/profile.php?id='+friends[i]+'">\n\
                    <img src="https://graph.facebook.com/'+friends[i]+'/picture" alt="friend" />\n\
                    </a>');     
                        }
                    }
                });
            }

If I run this code directly from the browser (www.mydomain.com/app) it works.
But when I run it from the canvas page (app.facebook.com) I get the foloowing error:

XMLHttpRequest cannot load
http://www.mydomain.com/src/ajax.php?action=getFriendsApp&token=AAAC0kxh1WAcBAHo3s0QaVy34mgdnCNGvrDZCvIQsZCBHZC8ovR9IuYEFlUKRqK0GgJosWAD6Embg8QrN07vivE6mOuAZAtxUD7WpySDL3wZDZD.
Origin https://www.mydomain.com is not allowed by
Access-Control-Allow-Origin.

Can you figure out why??

Answer 1

You need JSONP or to allow ajax requests on your domain. You can force it with

header("Allow-Access-Control-Origin:*");