2

フェッチで CORS の問題が発生し、Google を使い果たしました。以下のコードペンでは、flickr のオープン API をヒットしていくつかの画像を取得しようとしています。2 つのボタンが表示されます。$.getJSON を使用すると、「jquery で検索」が正常に機能します。

もちろん、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

手が大好きです。ありがとう。

4

1 に答える 1

2

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。

于 2016-02-18T10:22:04.667 に答える