使用Fetch API以json格式获取闪烁提要

Question

我设法通过使用$ .getJSON从闪烁提要api获取json响应,但是当我尝试使用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时没有.谢谢 !!

Answer 1

简短的回答:为的ARGS fetch(…)的方法和行为fetch(…)方法是从args作为非常不同的$.getJSON(…)方法和行为$.getJSON(…)方法,所以你不能指望fetch(…)做喜欢什么东西$.getJSON(…)呢.

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

我还想了解为什么在使用Fetch API时我会得到:"请求资源上没有'Access-Control-Allow-Origin'标头......并且当使用$ .getJSON时没有.

您的请求URL包含子字符串callback=?,因此将$.getJSON其作为JSONP处理:

如果URL包含字符串"callback =？" (或类似的,由服务器端API定义),请求被视为JSONP.

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

但是当你使用Fetch API进行调用时,它不会做任何幕后魔术来自动将请求作为基于URL的JSONP请求识别,并且不会创建script加载响应的元素.相反,它只会导致请求直接进入该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".

因此,您的浏览器会记录所请求的资源上存在"No'Access-Control-Allow-Origin'标头.因此,"null"原因不允许访问"消息"以告知您脚本将无法访问响应,以及原因.

如果你正在设置,mode: 'no-cors'我不会指望你会看到这个消息.但是你基本上永远不想设置mode: 'no-cors',因为这样做与缺少Access-Control-Allow-Origin响应头一样具有相同的效果- 它会阻止你的脚本完全访问响应.

至于期望tags: 'searchTerm',tagmode: 'any'并且format: 'json'如果你在作为方法的第二个参数的对象中指定它们会产生任何影响fetch(…),@ Yazan上面的评论是正确的:那些是flickr API的自定义查询参数,所以如果你是使用Fetch API执行GET请求时,您需要在URL中将它们指定为查询参数.

$.getJSON相反,它会自动为您做到:

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

...它所代表的数据是你作为第二个arg给出的名称/值对的对象$.getJSON.

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

• method:请求方法,例如GET,POST.
• headers:您要添加到请求中的任何标头
• body:您要添加到请求中的任何正文
• mode:您要用于请求的模式
• credentials:您要用于请求的请求凭据
• cache:您要用于请求的缓存模式
• redirect:要使用的重定向模式
• referrer:USVString,指定no-referrer,client或URL
• referrerPolicy:指定referer HTTP标头的值
• integrity:包含请求的子资源完整性值