javascript - 使用 XMLHttpRequest 的 Flickr API 调用不起作用

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 从源“null”访问“https://api.flickr.com/services/feeds/photos_public.gne?tags=rat&format=json&nojsoncallback=1”处的 XMLHttpRequest 已被 CORS 阻止策略:请求的资源上不存在“Access-Control-Allow-Origin” header 。

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

Answer 1

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

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

<小时/>

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null.jsbin.com'; is therefore not allowed access. But why I am not getting same error with getJSON

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