Question

我在使用fetch时遇到了CORS问题，并且谷歌已经筋疲力尽了。在下面的codepen中，我试图点击flickr的open api来获取一些图片。你会看到两个按钮。 “使用jquery搜索”工作正常，使用$ .getJSON。

当然，我想使用Fetch。 “使用Fetch搜索”不起作用。当我尝试发送相同的请求时，我收到此错误：

Fetch API cannot load http://api.flickr.com/services/feeds/photos_public.gne?tags=dog&tagmode=any. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
console_runner-ba402f0a8d1d2ce5a72889b81a71a979.js:1 TypeError: Failed to fetch(…)

当我添加mode: 'no-cors'时，我得到的所有内容都是opaque响应，不包含任何数据。

亲自尝试！ http://codepen.io/morgs32/pen/OMGEpm?editors=0110

会爱一只手。感谢。

Answer 1

看起来Flickr API正在使用JSONP。

如果在控制台中运行curl 'http://api.flickr.com/services/feeds/photos_public.gne?tags=asd&tagmode=any&format=json' -H 'Host: api.flickr.com' -H 'User-Agent: Mozilla/5.0 (X11; Linux x86_; rv:47.0) Gecko/20100101 Firefox/47.0' -H 'Accept: */*'，则不会收到JSON响应：

jsonFlickrFeed({
    "title": "Recent Uploads tagged asd",
    "link": "http://www.flickr.com/photos/tags/asd/",
    "description": "",
    "modified": "2016-02-16T18:34:00Z",
    "generator": "http://www.flickr.com/",
    "items": [
   {
     ...
})

JSONP自动支持

getJSON，但fetch不支持。{/ p>

使用新的Fetch API为JSON创建跨域请求

1 个答案: