Fetch erreur CORS avec instagram api

Question

Je suis en train d'obtenir des données de instagram api mais je continue à obtenir l'erreur suivante: 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).
Aussi je tout vérifié sur place instagram dev et toutes les options semblent très bien. Ceci est mon 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); 
    }); 

Comme vous pouvez le voir, je veux seulement obtenir des images assez straightforward.Locally j'utilise le plugin CORS pour le chrome et il fonctionne très bien, mais sur le serveur, il ne fonctionne pas. Est-ce que quelqu'un a une idée de ce qui pourrait être le problème et comment le résoudre?

Answer 1

Alors les gars afin de résoudre celui-ci, vous avez quelques possibilités. L'un d'entre eux utilise JQ qui prend en charge JSONP.
Votre code ressemblerait à quelque chose comme ceci:

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

Vous pouvez lire here plus sur les limites de sur le nombre de Instagram les photos.

Il est également possible d'obtenir des données avec JS pur. ?
De leurs 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.

Avec cela à l'esprit que vous pouvez faire quelque chose comme ceci:

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