使用 instagram api 获取 CORS 错误

2022-01-20 00:00:00 fetch javascript ajax

我正在尝试从 instagram api 获取一些数据，但我不断收到以下错误:跨源请求被阻止:同源策略不允许在 https://api.instagram.com/v1/users/1652250683/media/recent/?MYTOKEN&count=20&callback=? 读取远程资源.(原因:CORS 标头Access-Control-Allow-Origin"缺失).
我还检查了 instagram 开发网站上的所有内容，所有选项似乎都很好.这是我的代码:

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

如您所见，我只想让图像非常简单.在本地，我正在使用适用于 chrome 的 CORS 插件，它工作正常，但在服务器上却不行.有谁知道可能是什么问题以及如何解决它?

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 ?

推荐答案

所以，为了解决这个问题，你们有几个可能性.其中之一是使用支持 JSONP 的 JQ.
您的代码将如下所示:

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

您可以阅读此处了解更多关于 Instagram 对照片数量的限制.

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

还有使用纯 JS 获取数据的方法.
从他们的文档中:如果您正在编写 AJAX 应用程序，并且想用回调包装我们的响应，那么您只需do 是为任何 API 调用指定一个回调参数.

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

相关文章