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.

Using POST is probably not the right choice in this case, because of the cross origin ajax call. `$.getJSON()` or `$.ajax({ type: GET", dataType: "jsonp"})` would work better — anderssonola, May 06 '14 at 12:10
This is a post call not get please check it. [http://instagram.com/developer/endpoints/relationships/#post_relationship] — aemie, May 06 '14 at 12:27
Sorry about that, my mistake. To enable CORS you need to configure the HTTP headers set by your server e.g. Apache, IIS etc. — anderssonola, May 06 '14 at 12:41
It's ok no problem. I am using IIS what I do to configure HTTP header? — aemie, May 06 '14 at 12:43

score 8 · Answer 1 · answered Oct 12 '14 at 18:57

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

complynx · Accepted Answer · 2014-05-06T13:07:48.227

3

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

edited May 06 '14 at 13:07

answered May 06 '14 at 12:06

complynx

66
4

server reject the url calling in this way, because I am calling from localhost please tell me how I call it from localhost or other any server? – aemie May 06 '14 at 12:40
@Ashi, when you sent that query, server answered in appropriate way as it should've answered. But your browser restricts to evaluate the result due to in HTTP headers there was not present `Access-Control-Allow-Origin: *` or so. This is why you need to perform server-side requests. Server, using CURL or other stuff, can send requests and accepts every answer. – complynx May 06 '14 at 12:49
Please can you tell me what should I do to solve this problem? – aemie May 06 '14 at 12:53
@Ashi, see changes in answer. – complynx May 06 '14 at 13:08
thanks a lot. But I am doing it in dot net mvc4, can you help me how can I do it in dot net? – aemie May 07 '14 at 04:51

score 1 · Answer 3 · answered Jun 04 '16 at 21:35

1

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

answered Jun 04 '16 at 21:35

nncl

128
3
9

score 0 · Answer 4 · answered May 06 '14 at 12:09

0

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?

answered May 06 '14 at 12:09

capybaras

198
1
6

How enable CORS or JSONP? – aemie May 06 '14 at 12:29
According to the instagram API doc, you add a callback param such as "callback=callbackFunction", and here is a generic JSONP example: http://stackoverflow.com/questions/5943630/basic-example-of-using-ajax-with-jsonp – capybaras May 06 '14 at 13:44

XMLHttpRequest cannot load for instagram like

4 Answers4

Linked