使用 XMLHttpRequest 的 Flickr API 调用不起作用答案

【问题标题】：Flickr API call with XMLHttpRequest not working使用 XMLHttpRequest 的 Flickr API 调用不起作用
【发布时间】：2018-04-11 03:58:15
【问题描述】：

我正在尝试从 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.

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

【问题讨论】：

您是否检查了错误响应并尝试解决它？
嗯，首先是new XMLHttpRequest()。
@krger，我加载失败api.flickr.com/services/feeds/…?：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'null.jsbin.com' 不允许访问。但是为什么我没有得到与 getJSON 相同的错误。
@Andy 使用新的 XMLHttpRequest()，它给出了同样的错误。
您是否注册了 API 密钥？我认为您需要其中之一。

标签： javascript json ajax xmlhttprequest flickr

【解决方案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”标头。来源'null.jsbin.com';因此不允许访问。但是为什么我没有得到与 getJSON 相同的错误

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

【讨论】：

我已经更新了问题并且变得很简单。不，我没有使用带有回调选项的端点。如果您在浏览器上运行端点，它会为您提供 json 对象。我尝试了 JSONP，看起来还不错，但是有没有没有 JSONP 和 jquery 的解决方案。
@Tranquillity —“不，我没有使用带有回调选项的端点”：您在编辑问题之前是这样。 “如果您在浏览器上运行端点，它会为您提供 json 对象。” — 现在可以了，它没有原始 URL（当它提供 JSONP 时）。 “有没有没有 JSONP 的解决方案” - 是的，您使用我在答案中描述的代理。 "and jquery" — 不要求 jQuery 使用 JSONP。 JSONP 上的 Wikipedia 文章解释了如何使用它。和很多 SO 问题一样like this one。
谢谢@quentin，所以如果我理解正确，我们不能使用本机 ajax 调用该端点（即使没有回调），因为你提到 Flickr API 不支持 CORS，唯一的解决方案是使用 jquery 或将 CORS 设置更改为服务器，不是吗？
没有。您不能将 XMLHttpRequest 用于该端点，因为它不支持 CORS。您无法更改服务器上的 CORS，因为您不是 Flickr，因此无法更改 Flickr 的服务器。解决方案是使用充当代理的不同端点，或者使用 JSONP。不需要使用 jQuery（尽管这样做非常方便）。您可以使用没有 jQuery 的代理。您可以在没有 jQuery 的情况下使用 JSONP。
我观察到有趣的行为，上面的代码在 JSbin、JSfiddle 或 Codepen 中失败，但我第一次在我的 localhost (abc.local.com) 下本地尝试并且它工作没有交叉问题领域。可能是什么原因？您认为这只是因为它们被 Flickr 服务器阻止了。