Fetch CORS error with instagram api

Question

I'm trying to get some data from instagram api but I keep getting the following error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.instagram.com/v1/users/1652250683/media/recent/?MYTOKEN&count=20&callback=?. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
Also I checked everything on instagram dev site and all options seem fine. This is my code:

fetch('https://api.instagram.com/v1/users/1652250683/media/recent/?MYTOKEN&count=20&callback=', {
    mode: 'cors'
})
    .then(response => response.json())
    .then(function(data) {

        const response = data;

        const images = response['data'].map(img => {
            return [img.images.standard_resolution.url]
        })

        const topImgs = images.slice(0, 7);
        const leftImgs = images.slice(7, 10);
        const rightImgs = images.slice(10, 13);
        const bottomImgs = images.slice(13, 20);

        let topDivs = document.querySelector('.top').children;
        let leftDivs = document.querySelector('.left').children;
        let rightDivs = document.querySelector('.right').children;
        let bottomDivs = document.querySelector('.bottom').children;

        function* enumerate(iterable) {
            let i = 0;

            for (const x of iterable) {
                yield [i, x];
                i++;
            }
        }

        for (const [i, div] of enumerate(topDivs)) {
            div.innerHTML = `<img src="${topImgs[i]}">`
        }

        for (const [i, div] of enumerate(leftDivs)) {
            div.innerHTML = `<img src="${leftImgs[i]}">`
        }

        for (const [i, div] of enumerate(rightDivs)) {
            div.innerHTML = `<img src="${rightImgs[i]}">`
        }
        for (const [i, div] of enumerate(bottomDivs)) {
            div.innerHTML = `<img src="${bottomImgs[i]}">`
        }       

    })
    .catch(function(error) {
        // If there is any error you will catch them here
        console.log(error);
    });

As you can see I only want to get images pretty straightforward.Locally I'm using CORS plugin for chrome and it works fine but on server it does not. Does anyone have any idea what might be the problem and how to solve it ?

`&callback=?` ... suggests you expect JSONP - you don't get JSONP using fetch or XMLHttpRequest for that matter ... you use a script tag with src attribute (or JQuery if you must) — Jaromanda X, Aug 04 '17 at 14:05
I just added "?" as a last try to see if it might work like that. Original code just had "&callback=" I will edit post to emphasize this — Zvezdas1989, Aug 04 '17 at 14:10
It's not the ? It's the callback= that suggests it's a JSONP type API. Which means you can't use fetch or xmlhttprequest like I said. You need to read how JSONP works — Jaromanda X, Aug 04 '17 at 14:12
Use a proxy on your server to avoid exposing your credentials — charlietfl, Aug 04 '17 at 14:12
@JaromandaX So basically I should try to do it with JQ ? Also I thought I will be able to it this way by enabling valid url in developer tabs on instagram. — Zvezdas1989, Aug 04 '17 at 14:26
no, I said JQ "if you must" - no idea about developer tabs on instagram, I was just pointing out that it *looks like* the API is JSONP, and fetch (and xmlhttprequest) are not the right methods for JSONP (as opposed to JSON - the difference is important) — Jaromanda X, Aug 05 '17 at 00:15

score 0 · Accepted Answer · answered Aug 07 '17 at 10:52

So guys in order to solve this one you have a few possibilities. One of these is using JQ which has support for JSONP.
Your code would look something like this:

var token = 'your token',
    numPhotos = 20

$.ajax({
    url: 'https://api.instagram.com/v1/users/self/media/recent/',
    dataType: 'jsonp',
    type: 'GET',
    data: {access_token: token, count: numPhotos},
    success: function(data){
        console.log(data);
        // Do something
    },
    error: function(data){
        console.log(data);
    }
});

You can read here more about instagram limitations on number of photos.

Also there is way to get data with pure JS.
From their docs:If you're writing an AJAX application, and you'd like to wrap our response with a callback, all you have to do is specify a callback parameter with any API call.

With that in mind you can do something like this:

var token = 'your token',
    numPhotos = 20,
    scrElement = document.createElement( 'script' );

window.instaFunction = function( data ) {
    console.log(data);
    // Do something
}

scrElement.setAttribute( 'src', 'https://api.instagram.com/v1/users/self/media/recent?access_token=' + token + '&count=' + numPhotos + '&callback=instaFunction' );
document.body.appendChild( scrElement );

Fetch CORS error with instagram api

1 Answers1

Linked