How to retrieve JSONP using fetch?

Question

I'm not able to load the data from this public endpoint:

http://api.flickr.com/services/feeds/photos_public.gne?format=json

I get the following error:

Access to fetch at 'http://api.flickr.com/services/feeds/photos_public.gne?format=json' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

How to do this?

A public API is not necessarily available from web client JavaScript. If Flickr is not setting CORS headers, then the only option is your own server-side proxy to fetch it for your client. — Pointy, Jan 02 '19 at 19:08
https://stackoverflow.com/questions/33423853/flickr-json-returning-error-in-javascript-cross-domain — Diodeus - James MacFarlane, Jan 02 '19 at 19:09
I don't think you would even want to use `fetch()` with this. You would still follow the old pattern of creating a named, global function that the JSONP script will call and then create a script that points to the JSONP returning endpoint. — zero298, Jan 02 '19 at 19:10
Possible duplicate of [Axios and Fetch both result in CORS error but Postman doesn't](https://stackoverflow.com/questions/54011655/axios-and-fetch-both-result-in-cors-error-but-postman-doesnt) — , Jan 02 '19 at 19:39

score 0 · Accepted Answer · answered Jan 02 '19 at 19:18

Jsonp doesn't work like this as its designed to work around the same origin policy. If the flickr API supports CORS, you can use that with fetch, but if you want to use jsonp, you need to add a script tag and a callback. Further reading: https://en.wikipedia.org/wiki/JSONP

Example:

<script type="application/javascript">
window.jsonFlickrFeed = function(response) {
  alert(response);
};
</script>
<script type="application/javascript" src="http://api.flickr.com/services/feeds/photos_public.gne?format=json">
</script>

How to retrieve JSONP using fetch?

1 Answers1