Access-Control-Allow-Origin

[ferrycode]

we do have cropper over application server, photos loaded in apache webserver, we got the following error prevent photo to be displayed Image from origin has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[fengyuanchen]

You may try checkImageOrigin option (see #119).

[abachman]

I've just experienced the same issue, but I fixed the problem in my case by adding the crossorigin attribute and a cache-busting URL in the image tags I point cropper.js at.

That means my page template went from this:

<img class='js-image-cropper image-cropper' src='<%= @image.data('url') %>' />")

to this:

<img class='js-image-cropper image-cropper' src='<%= cacheBustUrl(@image.data('url')) %>' crossorigin />

Where cacheBustUrl is a function that adds Date.now() to the URL as a param. The checkImageOrigin option in cropper.js didn't have any effect since it's on by default and I hadn't changed it.

The problem is that when the browser goes to load the image multiple times, because cropper.js creates multiple img tags based on your original tag, it loads the image from the browser cache since it's the same URL. If the original, browser-cached image was not loaded with the proper CORS settings, subsequent javascript-triggered requests with the proper CORS settings will fail.

So even though the browser successfully loaded the image once, the browser, in making a request to the browser, is blocked by the browser, because the browser doesn't have permission to make that request (of the browser). There's a bug report against Chromium for this issue: https://code.google.com/p/chromium/issues/detail?id=409090.

This fix sidesteps around the issue by busting the browser cache and forcing it to reload the image on each page load.

I spent a few hours trying and failing to fix it in my Amazon S3 CORS settings before I figured this solution out. I caught on by noticing that the issue went away when I enabled the "Disable cache" option in the Chrome developer tools under the "Network" tab.

I apologize if this is too confusing, it's still slightly opaque to me as well and I cannot guarantee that I am right.

[fengyuanchen]

@abachman Wow! Awesome work! Thank you very much!

[anilmaurya]

I am using chrome Version 38.0.2125.111 and this workaround does not work for me.

[fengyuanchen]

@anilmaurya Are you sure to configure your image server with Access-Control-Allow-Origin: *

[anilmaurya]

@fengyuanchen I configured S3 to allow 'Access control allow origin' for GET request and now its working fine, sorry for trouble and thanks for quick reply.

[anilmaurya]

@fengyuanchen Although this fix work but there is lag in applying cropper to image because its loading image twice. If size of image is large then lags increases.

I am showing cropping in a modal , when user click on image I open a modal with image and apply cropper on image but due to this lag it takes some time to apply cropper hence this feature is not smooth enough.

[fengyuanchen]

@anilmaurya Forget the getDataURL method, just upload the image and crop it in server side, then you can set the checkImageOrigin option with false, and it loads once now.

[anilmaurya]

@fengyuanchen I am making an Ember App and uploading / loading images from S3. My api server is not involved in image processing therefore I need to crop image on client site and upload to S3.

[anilmaurya]

@fengyuanchen I managed to solve this Issue, I initially loaded image with crossorigin attribute as 'anonymous' and instead of adding timestamp to url , I added crossorigin attribute to cloned DOM.

will you accept a pull request for this ?

[fengyuanchen]

@anilmaurya Okey, thank you!

[yogevizhak]

hey ## FIXED ###

anyone who use cropper.js, and want to disable the origin thing (twice image reloading),

1. open the cropper.js file
2. search for 'checkImageOrigin: !0'
3. replace with 'checkImageOrigin: 0'

it works like a charm ;)

[fengyuanchen]

@yogevizhak I suggest just set the global default options like this:

$.fn.cropper.setDefault({
  checkImageOrigin: false
});

[yogevizhak]

Cute!

Thx

‫נשלח מה-iPhone שלי‬

‫ב-Jul 10, 2015, בשעה 5:18, ‏Fengyuan Chen notifications@github.com כתב/ה:‬

@yogevizhak I suggest just set the global default options like this:

$.fn.cropper.setDefault({ checkImageOrigin: false }); — Reply to this email directly or view it on GitHub.

[pidupuis]

For the record, the option is now called checkCrossOrigin.

[fengyuanchen]

// Disable image cross origin checking
$.fn.cropper.setDefault({
  checkCrossOrigin: false
});

[KarlisJ]

This does not work on localhost. Is there a way to allow on localhost?