我使用$从闪烁提要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不是。谢谢大家!!
简短的回答: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的USVStringreferer策略
:指定referer HTTP头的值完整性
:包含请求的子资源完整性值