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

Question

我使用$从闪烁提要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不是。谢谢大家！！

Answer 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头的值
• 完整性：包含请求的子资源完整性值