XMLHttpRequest cannot load for instagram like

问题:

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.

回答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");
    }
});

回答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=?

回答3:

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

回答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?