我正在尝试从 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);
});
正如您所看到的，我只想让图像变得非常简单。本地我正在使用 chrome 的 CORS 插件，它工作正常，但在服务器上却没有。有谁知道可能是什么问题以及如何解决它？
所以伙计们，为了解决这个问题，你有几种可能性。其中之一是使用支持 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);
}
});
您可以在此处阅读有关 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 );
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句