search

processing / p5.js

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —
http://p5js.org/
GNU Lesser General Public License v2.1
21.72k stars 3.34k forks source link

Simple fix for loadJSON and other calls #1535

Closed iosonosempreio closed 7 years ago

iosonosempreio commented 8 years ago

Hi, I've had the same issue some other people got with the loadJSON() request (here: https://github.com/processing/p5.js/issues/425).

Searching for a solution I discovered that this issue is related to a limit that browsers set for security reasons and a CORS workaround needs to be used in order to bypass them (here: html5rocks.com/en/tutorials/cors/).

A very quick (and for me even very efficient) way to solve this problem is to use a public service called cors.io. Instead of coding this:

var url = 'http://example.io/data.json'
loadJSON(url, callback, onError, 'json');

Just add http://cors.io/?u= before the url of your request:

var url = 'http://cors.io/?u=http://example.io/data.json'
loadJSON(url, callback, onError, 'json');

Everything should then work smoothly because that service works itself as CORS workaround, "fixing" the security limits of browsers.

Assumed that p5js is created firstly for designers (as I am) and artists, a similar solution could be pointed out in the official reference, so that people do not get stuck while experimenting with cool external services.

UPDATE: if https:// is required, i.e. as in a GitHub Page, use crossorigin.me and turn this:

var url = http://example.io/data.json

into this:

var url = https://crossorigin.me/http://example.io/data.json
toolness commented 8 years ago

Thanks for the suggestion @iosonosempreio!

I think either adding mention of this workaround, or linking to a resource that mentions it, to the output of the friendly error system when such calls fail (see https://github.com/processing/p5.js/issues/1501#issuecomment-230251662) would also be helpful.

@lmccart does such a guide on dealing with CORS issues within the context of p5 currently exist? Or should I write something up?

343N commented 7 years ago

Hi, I'd rather not create another issue so I thought I'd post here.

Trying to use loadJSON to grab json from the Instagram API (as jsonp) using url 'https://www.instagram.com/instagram/media/', so. loadJSON('https://www.instagram.com/instagram/media/', loadedData, 'jsonp');

when run, p5 throws an error 'unexpected token :' which ends up trying to load json from 'https://www.instagram.com/instagram/media/?callback=reqwest_1482589668300' and after trying to find a solution this has only confused me more. (crossorigin.me refuses to work with this URL and I'd personally rather figure out what's going on and how to fix it so I don't have to rely on a proxy). the data is wrapped in the callback but how does p5 work with that? this is all very confusing

lmccart commented 7 years ago

jsonp related issues have been fixed with the move to the fetch API underlying the loadX methods. it will be in the next release coming soon.