提问者:小点点

使用 Fetch API 获取 json 格式的闪烁源


我使用$从闪烁提要api获得json响应。getJSON,但当我尝试使用Fetch时,我似乎只得到一个XML响应。

这有效:

var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
$.getJSON(flickerAPI, {
                    tags: "searchTerm",
                    tagmode: "any",
                    format: "json"
                })
                .done(function (data) {
                   //....
                });

这不起作用:

var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";

var request = new Request(flickerAPI, { 
                mode: 'no-cors',
                tags: 'searchTerm',
                tagmode: 'any',
                format: 'json'
            });

            fetch(request)
                .then(function (res) {
                    return res.json();
                })
                .then(function (text) {
                    console.log(text);
                });

我还想知道为什么在使用Fetch API时,我会得到:“在请求的资源上没有‘Access-Control-Allow-Origin’头。因此,不允许访问源' null'。如果不透明响应满足您的需要,请将请求的模式设置为“no-cors ”,以便在禁用cors的情况下获取资源。”而用$的时候。getJSON不是。谢谢大家!!


共1个答案

匿名用户

简短的回答:fetch(...)方法的参数和fetch(...)方法的行为与$. getJSON(...)方法的参数和$. getJSON(...)方法的行为-所以您不能期望fetch(...)做任何像$. getJSON(...)所做的事情。

更长的回答,回应您的具体问题:

我还想理解为什么在使用Fetch API时会得到:“请求的资源上不存在‘访问控制允许源代码’头……而在使用$.getJSON时则不存在。

您的请求URL包含子字符串< code>callback=?,所以< code>$。getJSON将其作为JSONP处理:

如果 URL 包含字符串“回调 =?”(或类似,如服务器端 API 所定义),请求被视为 JSONP。

...这意味着在幕后,它不是从JavaScript发送跨域请求,而是创建一个加载JSONP响应的脚本元素。由于浏览器允许使用脚本元素来跨域加载脚本,因此永远不会遇到任何限制。

但是,当您使用Fetch API进行调用时,这不会产生任何幕后魔法,根据URL自动将请求识别为JSONP请求,也不会创建<code>脚本</code>元素来加载响应。相反,它只会导致直接向该发出请求http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?“URL。

但是http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"实际上并不打算与Fetch API或XHR一起使用,因此它发送回的响应不包括Access-Control-Allow-Origin响应头。

根据CORS协议,对于浏览器来说,缺少Access-Control-Allow-Origin响应标头意味着“不要将此响应公开给Web应用程序中运行的任何客户端JavaScript”。

因此,您的浏览器会记录“请求的资源上不存在'访问控制-允许-源'标头。因此,不允许访问源“null”消息,让您知道您的脚本将无法访问响应,以及原因。

如果您正在设置< code >模式:“no-CORS”,我想您不会看到这条消息。但是无论如何,您基本上永远不要设置< code>mode: 'no-cors',因为这样做与缺少< code > Access-Control-Allow-Origin 响应头具有相同的效果——它阻止您的脚本对响应进行任何访问。

至于期望标签:'search chTerm'标签模式:'any'格式:'json'如果您在作为fetch(...)方法的第二个参数给出的对象中指定它们,@Yazan的评论是正确的:这些是flickr API的自定义查询参数,因此如果您使用Fetch API执行GET请求,则需要在URL中将它们指定为查询参数。

$. getJSON,相比之下,会自动为您执行此操作:

发送到服务器的数据作为查询字符串附加到URL。

...其中,它所指的数据是您作为 $.getJSON 的第 2 个参数给出的名称/值对的对象。

相比之下,对于fetch(...)方法,您在第二个参数中指定的名称和值不能是任意查询参数。相反,那里只允许一组预定义的名称:

  • 方法:请求方法,例如GET、POST
  • 标题:您要添加到请求中的任何标题。
  • 正文:要添加到请求中的任何正文
  • 模式:要用于请求的模式。
  • 凭据:要用于请求的请求凭据。
  • 缓存:要用于请求的缓存模式
  • 重定向:要使用的重定向模式
  • referer:不指定referer、客户端或URL的USVString
  • referer策略:指定referer HTTP头的值
  • 完整性:包含请求的子资源完整性值