XMLHttpRequest cannot load for instagram like

Question

I want to call this link for the like on instagram, I am using following code but it is not working. Following error comes, please help me how I call this url from local host and server also.

var likeurl = "https://api.instagram.com/v1/media/" + idslist[1] + "/likes?ACCESS_TOKEN="    + accesstoken;
    Nextin_downloadData(likeurl);
    $.ajax({
        url: likeurl,
        type: 'POST',
        data: {

        },
        success: function (result) {
            alert("out" + result);


        },

        error: function () {
            alert("error");
        }
    });

Error : XMLHttpRequest cannot load       https://api.instagram.com/v1/media/714346267865083830_540073674/likes?  ACCESS_TOKEN=1281148571.506af84.fc2e95e7257fdhgu5thca. No 'Access-Control-Allow-Origin'   header is present on the requested resource. Origin 'http://localhost:2356' is therefore   not allowed access.

Answer 1

Unfortunately, this is instagram-side restriction. You should use therefore server-side queries. Browser blocks cross-domain request because in the return there is no Allow-origin header. I recommend to read more on CORS to fully understand this problem.

For example if you're using PHP backend, this is the solution:

Backend:

<?php
$ch = curl_init();

// set URL and other appropriate options
curl_setopt($ch, CURLOPT_URL,"https://api.instagram.com/v1/media/" . $_REQUEST['id'] ."/likes?ACCESS_TOKEN=" .$_REQUEST['token']);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, 'out'.$_REQUEST['data']);
// grab URL and pass it to the browser
curl_exec($ch);
// close cURL resource, and free up system resources
curl_close($ch);

Frontend:

$.ajax({
    url: "path.to.backend.php",
    type: 'POST',
    data: {
        id:idslist[1],
        token:accesstoken,
        data:{}
    },
    success: function (result) {
        alert("out" + result);
    },

    error: function () {
        alert("error");
    }
});

Answer 2

You can do this from the browser with jsonp:

$.getJSON(
        'https://api.instagram.com/v1/users/25025320/media/recent/?client_id=YOUR CLIENT ID&callback=?',
        function(data) {
            console.log(data);
        }
    );

notice the addition of callback=?

Answer 3

Just add &callback=? at the end of your request.

Answer 4

You are being rejected by the server because you are attempting to cross domains (calling domain B from a page rendered by domain A) and the server hosting this API does not allow that. These protections are in place to prevent malocious js code from doing just that.

Since this is a server setting, are you sure these api's are meant to be called from outside Instagram.com?