Question

我正在尝试从 Flickr 获取JSON结果列表，并且普通js XMLHttpRequest无法正常工作。

这是ajax调用示例，没有回调且无法正常工作

var url = "https://api.flickr.com/services/feeds/photos_public.gne?tags=rat&format=json&nojsoncallback=1";

xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    console.log(xhr.status);
  console.log(xhr.readyState);
    if (xhr.readyState == 4 && xhr.status == 200) {
        var data = JSON.parse(xhr.responseText);
        console.log(data);  
    }else {
       console.log("error"); 
    }
}
xhr.open("GET", url)
xhr.send();

我收到了错误 -

js:1 Access to XMLHttpRequest at 'https://api.flickr.com/services/feeds/photos_public.gne?tags=rat&format=json&nojsoncallback=1' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

你能告诉我问题出在哪里吗？

Answer 1

Flickr API不支持CORS。无法使用JSONP API从嵌入在不同来源的网页中的JS直接访问它。

Flickr确实提供了XML版本（从URL中删除format=json&callback=?）和普通的JSON版本（使用format=json&nojsoncallback=1）但没有Flickr授予CORS的权限，您无法直接访问它。您可以使用代理服务器（与您的网页在同一个源上，或者在响应中插入CORS的服务器）。

请求的资源上没有“Access-Control-Allow-Origin”标头。 Origin'null.jsbin.com';因此不允许访问。但是为什么我没有得到与getJSON相同的错误

因为当URL中有callback=?时，jQuery使用JSONP技术而不是XMLHttpRequest。

使用XMLHttpRequest的Flickr API调用无法正常工作

1 个答案: