Fetch API cannot load file

Ah, CORS, so we meet again.

When trying to access resources (especially in any browser other than Firefox) in a developer-y way, you will often also be doing things that look remarkably like what bad actors do who spoof websites, steal identities, pass viruses, run bot-nets etc – one aspect of which is sometimes called “cross-site scripting,” although suspicious crossings can also be local to a client. CORS (Cross-Origin Resource Sharing) is one of the security measures that prevents you from doing things in a browser that might mislead or be harmful to the user (yet may also make it harder to program cool things like information visualizations, which may also benefit from orchestrating resources from different sources).

If you keep trying to create things like you are now in JS for the browser, then you will probably keep encountering CORS and other anti-XSS until you get a handle on everything it doesn’t want you to do. The important thing is that these aren’t limitations of p5.js or JavaScript per se – they are default limitations of most modern web browsers, and the browser is saying “don’t do it that way.” The simple solution is often to provide your information the way that a legit website would – by hosting it all from one source, locally or remotely, and having the user contact it explicitly in a way that they wouldn’t be surprised things are coming from somewhere else. Here is some info:

2 Likes