Why is my facebook graph api call executing the error callback function

Question

I'm working with the facebook javascript sdk. when i do an api call it comes back and exectutes the error function, however its returns the data i requested. Even though its returning the right data, I would like to know why its executing the error function. Can you help please? thanks

javascript:

window.fbAsyncInit = function() {
            FB.init({
                    appId      : '<my_App_id>',
                    cookie     : true,  // enable cookies to allow the server to access the session
                    xfbml      : true,  // parse social plugins on this page
                    version    : 'v2.5' // use graph api version 2.5

            });
            //device APIs are available
            document.getElementById("facebook_login").addEventListener('click', loginViaFacebook, false);

            function loginViaFacebook(){
                FB.getLoginStatus(function(response) {
                    if (response.status === 'connected') {
                            //user is logged into our app and facebook.
                        //now we need to get their facebook email address and check if they are registered with us. ie their email address exists in the database

                        FB.api("me/?fields=id,email,picture", ["public_profile"],function(result){

                                alert("Result: " + JSON.stringify(result));

                                //do ajax request here with email address.  
                                },
                                function(error){    
                                //api call failed
                                    alert("api call Failed: " + JSON.stringify(error));
                                }
                        );

                    }else if(response.status === 'not_authorized'){
                         //The person is logged into Facebook, but not your app.(facebook docs)
                        //in this case though they are coming from just pressing the facebook_login button on our app so we dont need to tell them to log in.

                        }else{
                            FB.login(function(response) {
                            // handle the response
                            console.log("UserInfo: " + response.authResponse.userID);
                            if(response.status === 'connected'){

                            FB.api('/me?fields=id, email, name, picture', ["public_profile"],function(data) {
                                console.log(data);
                                var fb_user_id = data.id;
                                var fb_name = data.name;
                                var fb_email = 'mail@gmail.com';
                                var fb_picture_url = data.picture.data.url;
                                facebook_details.push({'fb_name': fb_name, 'fb_pic': fb_picture_url});

                                console.log(fb_user_id);
                                $.ajax({
                                    type: 'post',
                                        url: 'http://www.example.com/login_with_facebook.php',
                                            data: {'fb_user_id': fb_user_id, 'fb_email': fb_email},                      

                                        success: function(data){
                                        alert("data" + data);

                                        },
                                        error: function(xhr, status, error) {
                                        alert("error message:" + error);
                                    }

                                }); //end ajax

                            },
                            function(error){    
                                //api call failed
                                alert("login api call Failed: " + JSON.stringify(error));
                            }); //end api call
                            }//end if statement

                        }, 
                        function(error){
                                alert("FB login Failed: " + error);
                            });


                        }   

                }, 
                function(error){ 
                    alert("FB get status Failed: " + error);
                }); 

            }//end loginViaFacebook



        };
        //remove this when packaging with phonegap as we will use the facebookconnectplugin instead.
        // Load the SDK asynchronously
            (function(d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) return;
                js = d.createElement(s); js.id = id;
                js.src = "//connect.facebook.net/en_US/sdk.js";
                fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));

the console:

developer tools network-status code 302

developer tools network-also status code 307

Answer 1

If you'd like to get rid of SecurityError, you should encrypt your traffic using HTTPS. It's not so difficult:

1. Create account on CloudFlare
2. Change your domain's DNS to CloudFlare's
3. Enter your server's IP in CloudFlare console
4. Enable free HTTPS (and disable cache - it may be tricky sometimes)

Now traffic to your website will be redirected through CloudFlare. Traffic from your clients to CloudFlare will be encrypted, and traffic from CloudFlare to your server won't.

While it's not 100% secure, it allows to secure most common vector of attack - malicious internet provider etc and it takes very little effort to get free service worker-ready website.

If you want your own cert, you can use Let's Encrypt