使用 instagram api 获取 CORS 错误

Question

我正在尝试从 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 开发站点上的所有内容，所有选项似乎都很好。这是我的代码：

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 我正在为 chrome 使用 CORS 插件，它工作正常，但在服务器上却不行。有谁知道可能是什么问题以及如何解决它？

Answer 1

伙计们，为了解决这个问题，您有几种可能性。其中之一是使用支持 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 );

使用 instagram api 获取 CORS 错误

Fetch CORS error with instagram api

javascript

ajax

fetch-api