取CORS误差与Instagram的API

-1

我想从Instagram的API的一些数据，但我不断收到以下错误： 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).
我也查了Instagram的开发站点的一切，所有的选择似乎罚款。这是我的代码：取CORS误差与Instagram的API

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

正如你可以看到，我只想要得到的图像相当straightforward.Locally我使用CORS插件Chrome和它工作正常，但在服务器上没有。有没有人有任何想法可能是什么问题，以及如何解决它？

来源

2017-08-04 Zvezdas1989

'＆回调='...建议你期望JSONP - 使用提取或XMLHttpRequest的JSONP你没有得到对于这一点......你使用src属性的脚本标记（或者如果你必须的话，使用JQuery） –

我刚刚加了“？”作为最后一次尝试，看看它是否可以像那样工作。原始代码只有“＆callback =”我会编辑帖子来强调这个 – Zvezdas1989

这不是？这是回调=表明它是一个JSONP类型的API。这意味着你不能像我说的那样使用fetch或xmlhttprequest。你需要阅读JSONP的工作方式 –

所以，为了解决这个问题，你们有几种可能性。其中之一是使用支持JSONP的JQ。
您的代码将是这个样子：

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

您可以阅读here更多关于照片数量Instagram的限制。

也有办法用纯JS获取数据。？
从自己的文件：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.

考虑到这一点，你可以做这样的事情：

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

来源

2017-08-07 10:52:45 Zvezdas1989

取CORS误差与Instagram的API

回答

相关问题