Croppie: access Image from amazonaws and apply croppie(cross origin).

[mustkem]

Expected Behavior

I am using amazonaws s3. There are some images where I need to apply resize plugIn. But when we hit the button to apply the the plugin it should be able to resize the image.

Actual Behavior

But in actual I am getting this error:
Access to Image at 'amazonserver' from 'otherserver' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

• Browser:Chrome
• Version:66.0

What we can do if we have images on cross servers(amazon in this case). Any help is appreciated. Thanks a many.

Edit-1
Basicaly the thing is that image is comming fine from cross origin when landing on page and we can see the image appearing properly but when the same image element passed to plugin to apply the resize functionality it actully return the cross origin error and plugin dont work. However if i have the image on same server there is no error.

[thedustinsmith]

Have you tried following the steps in this documentation? https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

[lucasprochnow2]

I'm facing the same issue with chrome.
Firefox seens ok

That is my cors configuration in s3:

[mustkem]

@thedustinsmith thank you very much for your kind reply.

As I see now as @lucasprochnow2 raised, this issue is limited to chrome only. I have put some third party images say not from amazon or from my server still issue encounter.
I dont see if amazon configurations have things to do with this schnerio if I am not mistaken.

Please suggest any way to step out from the issue in this specific browser dependent case.

I can look into the js file but before that I want to be sure that if it would be the reasonable way to fix this. Any help is much appreciated.

[thedustinsmith]

Can one of you provide a link to an image in your s3 bucket?

[mustkem]

hello @thedustinsmith I have a demo. Here is a amazon bucket image.

https://jsfiddle.net/ejuvkwwh/4/

Demo works fine in firefox but in chrome it generate error and resize functionality would not work.

Please go ahead with this demo and do let me know if you need other information too.

Warm regards

[thedustinsmith]

Thanks for the jsfiddle. I'm having a hard time replicating the issue, but here's what I think is happening. You have an img tag that loads the image before croppie even handles it. Then your browser is caching that result. Since your image tag doesn't have crossOrigin="anonymous", the result that your browser is caching isn't a cors image. Therefore the image that croppie is given by the browser is the non-CORS version.

In short, try adding crossOrigin="anonymous" to your img.

I modified the fiddle and can't get the issue to occur with that change implemented:
http://jsfiddle.net/ejuvkwwh/8/embedded/result/

[mustkem]

Yes I think your observations are right. This crossOrigin="anonymous" worked.
Thank you very much for your time and support @thedustinsmith.