I'm trying to load an image called "border.bmp" so that I can use it as a texture for WebGL. Here's how I reference the image.

var img;
function preload() {
    img = loadImage("assets/border.bmp");
}

I then get this error in the console.

Access to Image at 'file:///C:/P5.js/empty-example/assets/border.bmp' from 
origin 'null' has been blocked by CORS policy: Invalid response. Origin 
'null' is therefore not allowed access.

What is this error message? What does it mean? How do I load the image?

I'm trying to load an image called "border.bmp" so that I can use it as a texture for WebGL. Here's how I reference the image.

var img;
function preload() {
    img = loadImage("assets/border.bmp");
}

I then get this error in the console.

Access to Image at 'file:///C:/P5.js/empty-example/assets/border.bmp' from 
origin 'null' has been blocked by CORS policy: Invalid response. Origin 
'null' is therefore not allowed access.

What is this error message? What does it mean? How do I load the image?

• javascript
• webgl
• p5.js

• 2 The solution is to use a simple web server. It will take you < 2 minutes. Here's one and here's some more. Serve your p5.js folder then go to http://localhost:8080 or whatever port the server you decide to use serves on – user128511 Commented Oct 14, 2017 at 14:46
• Other ways to run a server – ggorlen Commented Jul 22, 2022 at 14:58

4 Answers 4

The ment by gman and the answer by Dale are both correct. I highly remend you take the time to understand exactly what they're saying before you downvote or dismiss them.

CORS stands for cross-origin resource sharing, and basically it's what allows or prevents JavaScript on one site from accessing stuff on another site. A quick google search of "JavaScript CORS" or just "cors" will give you a ton of information that you should read through.

So if you're getting a CORS error, that means that the site that holds your image is not letting the site that holds your code access the image. In your case, it looks like you're loading stuff from a file: URL, which is not being loaded from a server. That's what the Origin null part of the error means.

So, step one is to listen to gman's ment and run your sketch from a local webserver instead of using a file: URL. His ment already contains links explaining how to do that, or you could use the P5.js web editor or CodePen or any other basic web host.

The most mon setup is to include the image files in the same server as the code, so that should be pretty much all you need to do. But if you're storing the images at a different URL than the code, then step 2 is to follow Dale's answer and setup your image server to allow requests from your code server.

While the following doesn't directly answer the OP question, it can help others, like me, that ended up here searching for P5.JS CORS.

To bypass CORS restrictions simply add the blocked URL after https://cors-anywhere.herokuapp., i.e.:

var = 'https://cors-anywhere.herokuapp./http://blocked.url'

P5.JS Example:

Lets say you want to load a remote mp4 video (it can be any file-type) using P5.JS from a server that doesn't have CORS enabled, for these situations, you can use :

var vid;
function setup() {
    vid = createVideo(['https://cors-anywhere.herokuapp./http://techslides./demos/sample-videos/small.mp4'], vidLoad);
}

// This function is called when the video loads
function vidLoad() {
    vid.play();
}

UPDATE:

The demo server of CORS Anywhere (cors-anywhere.herokuapp.) is meant to be a demo of this project. But abuse has bee so mon that the platform where the demo is hosted (Heroku) has asked me to shut down the server, despite efforts to counter the abuse (rate limits in #45 and #164, and blocking other forms of requests). Downtime bees increasingly frequent (e.g. recently #300, #299, #295, #294, #287) due to abuse and its popularity.

To counter this, I will make the following changes:

1. The rate limit will decrease from 200 (#164) per hour to 50 per hour.
2. By January 31st, 2021, cors-anywhere.herokuapp. will stop serving as an open proxy.
3. From February 1st. 2021, cors-anywhere.herokuapp. will only serve requests after the visitor has pleted a challenge: The user (developer) must visit a page at cors-anywhere.herokuapp. to temporarily unlock the demo for their browser. This allows developers to try out the functionality, to help with deciding on self-hosting or looking for alternatives.

CORS Stands for Cross-origin resource sharing. By default WebGL will block any resource (images, textures, etc) from any external origin. WebGL thinks the local resource is from an external origin.

You can bypass this by using img.crossOrigin = ""; I'm not an expert in webGL, all this information was found here

If you want to load local images in P5, you can use the drawImage() function of the canvas instead of image() function of the P5.js

let img;

function setup() {
    createCanvas(windowWidth,windowHeight);
    img = new Image();
    img.src = "assets/smiley.png";
}

function draw() {
    drawingContext.drawImage(img,mouseX,mouseY);
}