Croppie: cannot access image on another domain - CORS issues

[nicolasvahidzein]

hello, when i pass a URL from a image i want to allow the users to load has his profile pix, i cannot do it, whether http or https.

it gives me a CORS error, is this normal? how can i go around this?

Access to Image at 'http://cdn26.us1.fansshare.com/photo/wallpapersforipad/my-neighbor-totoro-wallpaper-hd-wallpapers-tv-181215306.jpg' from origin 'http://192.168.2.5:8018' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.2.5:8018' is therefore not allowed access.

Thanks.

[thedustinsmith]

Croppie uses the drawImage and getImageData of the canvas element to crop images, so there's no way around this unless you can modify the headers on the image. If you can modify the headers, then you'll want to add the header Access-Control-Allow-Origin: *. Typical environments will check to make sure the request is coming from an allowed domain, if so then they add that header. If you don't want to bother with that you can just add that header for all requests.

[nicolasvahidzein]

Hello, thank you for yoru prompt response. I'm confused as to how i can ever modify a header for an image in a domain i do not own and control.

Maybe i misunderstood. Shouldn't those headers be on my end? i was thinking maybe i need to install something like i did on the laravel backend, a CORS module to make it go smoothly but this time in the javascript front end side of things.

[thedustinsmith]

If you don't control the domain, then there's nothing you can do about the headers, you won't be able to use croppie with images from domains that aren't CORS compatible.

[nicolasvahidzein]

I am really speechless, i wish i knew how this all worked. I can totally view the image in the browser but i cannot access it in my app? How do they know and how is the mechanism different? This is baffling to me.

[thedustinsmith]

Here's the simplest example I can give: http://output.jsbin.com/nadizahohe

Here's how mozilla describes why this is an issue:
https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

This protects users from having private data exposed by using images to pull information from remote web sites without permission.

[Sunhat]

@thedustinsmith Clearly this guy is new to development and you act like an ass

[thedustinsmith]

@Sunhat @nicolasvahidzein Sorry, didn't mean to offend, just tried to provide some resources. Its hard to respond to all the issues with pleasantries.