xmlhttprequest - 使用新的 Fetch API 对 JSON 进行跨域请求

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。