filerobot-image-editor: CORS error when loading images from external urls

https://github.com/scaleflex/filerobot-image-editor/commit/cdfd80c00def4ffc988358c9a12cc36427e55e64

Supposedly fixed on this commit ^^^

using: "react-filerobot-image-editor": "^4.3.8"

Any fixes?

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Comments: 17

Most upvoted comments

This seems to fix our issue for now: https://www.hacksoft.io/blog/handle-images-cors-error-in-chrome

It’s because the cached image loaded via the <img> tag doesn’t retain the CORS headers in Chrome/Edge (and possibly other browsers), so when the cached image is loaded into the plugin with no CORS headers, it fails.

@all, we have supported noCrossOrigin property in v4.5.0 release that might be useful for u, but we don’t advice to use it unless u know what u are doing as it might affect the filters applying & image saving

Hello guys,

I’ve had the same problem, I use the AWS CloudFront CDN paired with a Lambda function to serve my images and assets and I have two solutions to resolve these CORS errors:

  1. Load your image into an new Image() object and return the src string ;
  2. Or, configure your CDN / Lambda function (if you have the option) to add the Access-Control-Allow-Origin: '*' header.

For the first option you can do somthing like this:

/**
   * @param {String} src URL of the remote image or base64.
   * @returns {String}
   */
  const loadImage = (src) => {
    const image = new Image();

    image.onload = () => console.log(image);

    image.crossOrigin = 'Anonymous';
    image.src = src;

    return image.src;
  };

Remove the crossOrigin if you can’t define the Access-Control-Allow-Origin: '*' header on the origin side.