# How to solve problems with CORS?

**URL:** https://discourse.processing.org/t/how-to-solve-problems-with-cors/16048
**Category:** Coding Questions
**Created:** [December 2, 2019, 4:46pm UTC](https://discourse.processing.org/t/how-to-solve-problems-with-cors/16048 "2019-12-02T16:46:28Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![willianxz](https://avatars.discourse-cdn.com/v4/letter/w/a8b319/32.png) [@willianxz](https://discourse.processing.org/u/willianxz)
#### Post date: [December 2, 2019, 4:46pm UTC](https://discourse.processing.org/t/how-to-solve-problems-with-cors/16048/1 "2019-12-02T16:46:28Z")

</div>

When you use:

```auto
loadImage ('urldeoutrohost.jpg', img => {
     image (img, 0.0);
});

```

It ends up giving CORS error if you are not using a CORS extension. I would like to know if there is any way to solve this ?, why didn’t I want to have people have to install this extension to run my program.

Here the program exemple:  
[https://editor.p5js.org/willianxz/full/DLk9uXnJx](https://editor.p5js.org/willianxz/full/DLk9uXnJx)

---

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [December 2, 2019, 5:16pm UTC](https://discourse.processing.org/t/how-to-solve-problems-with-cors/16048/2 "2019-12-02T17:16:04Z")

</div>

> [@willianxz](#):
>
> I would like to know if there is any way to solve this?

The best, easier & correct way to load images from sites w/ CORS disabled is simply manually get them and place them inside your code’s folder: 📁

> **[Preload Image Masks](https://glitch.com/~preload-image-masks)**
>
> Preload Image + Mask. Then clone the original.

If you don’t mind have your loaded images tainted, you can use **createImg()** instead: 🖼

> **[reference | p5.js](https://p5js.org/reference/#/p5/createImg)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

As a last recourse, you may use some CORS proxy service in order to load assets as if they had CORS enabled. 😈

---

<div class="post-metadata">

### Author: ![willianxz](https://avatars.discourse-cdn.com/v4/letter/w/a8b319/32.png) [@willianxz](https://discourse.processing.org/u/willianxz)
#### Post date: [December 2, 2019, 5:18pm UTC](https://discourse.processing.org/t/how-to-solve-problems-with-cors/16048/3 "2019-12-02T17:18:47Z")

</div>

This is not what I am looking for as it is intended to show the information / images coming from the API.

I wish there was some command to allow you to display images without this problem … why always make it so difficult? - ’

I don’t think I can fix this problem since I don’t have access to the server from which the API is being used nor the kk code editor itself  
Anyone who wants to see will have to install this same CORS extension.

---

<div class="post-metadata">

### Author: ![bryanrtboy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bryanrtboy/32/6831_2.png) [@bryanrtboy](https://discourse.processing.org/u/bryanrtboy)
#### Post date: [April 4, 2020, 11:26pm UTC](https://discourse.processing.org/t/how-to-solve-problems-with-cors/16048/4 "2020-04-04T23:26:43Z")

</div>

I am trying to do the same thing, show students how to use an API to fetch an image. @GoToLoop had a solution that seems logical and it may have used to [work here](https://forum.processing.org/two/discussion/11608/i-can-t-display-images-dynamically-loaded-from-web-with-p5-js-always-a-cross-domain-issue).

Unfortunately, the loadImage function with a the callback is not generating an error event. This code does not work:

```auto
/**
 * LoadImageErrorOverride (v1.12)
 * by GoToLoop (2015/Jul/09)
 *
 * forum.Processing.org/two/discussion/11608/
 * i-can-t-display-images-dynamically-loaded-from-web-
 * with-p5-js-always-a-cross-domain-issue#Item_3
 */
 
const URL = 'https://covers.openlibrary.org/b/id/295577-S.jpg';
 
var img;
 
function loadImageErrorOverride(errEvt) {
  const pic = errEvt.target;
 
  if (!pic.crossOrigin) return print('Failed to reload ' + pic.src + '!');
  print('Attempting to reload it as a tainted image now...');
  pic.crossOrigin = null, pic.src = pic.src;
}
 
function setup() {
  createCanvas(500, 400);
  noLoop();
 
  loadImage(URL,
            function (pic) { print(img = pic), redraw(); },
            loadImageErrorOverride);
}
 
function draw() {
  background(img || 0350);
}

```

I’m going to try to load the image using createImg(). If anyone has example code to do this, that would be great to see!
