上傳圖片到圖片伺服器，因為域名不同，多以會有跨域問題。

No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://img.xxx.com’ is therefore not allowed access.

照看程式碼發現，cropper.js裡面對圖片的引用路徑做了判斷，給img標籤添加了 crossorigin=“anonymous”（匿名跨域屬性）。

並且用了XMLHttpRequest 的get請求去訪問img的引用路徑，這樣確實訪問不到。需要在圖片伺服器，或者返回的請求頭新增 Access-Control-Allow-Origin:*，或Access-Control-Allow-Origin:請求來源域名。

有一種簡單快速的解決辦法，就是直接去掉cropper.js裡面跨域屬性，因為預設情況下圖片跨域也是可以顯示的。

對於低版本的cropper.js可以這樣：

this.$clone = $clone = $('<img>');

    $clone.one('load', $.proxy(function () {
      var naturalWidth = $clone.prop('naturalWidth') || $clone.width(),
          naturalHeight = $clone.prop('naturalHeight') ||
 
 $clone.height();

      this.image = {
        naturalWidth: naturalWidth,
        naturalHeight: naturalHeight,
        aspectRatio: naturalWidth / naturalHeight,
        rotate: 0
      };

      this.url = url;
      this.ready = true;
      this.build();
    }, this)).one('error', function () {
      $clone.
 
remove();
    }).attr({
//      crossOrigin: crossOrigin, // "crossOrigin" must before "src" (#271)
      src: bustCacheUrl || url
    });

註釋掉那行crossOrigin就好了。

對於高版本（我用的Cropper v2.3.4）因為程式碼調整了，找到 function getCrossOrigin(crossOrigin)，將裡面返回跨域程式碼的那行註釋掉，返回空字串就好了。

我是這樣改的：

  function getCrossOrigin(crossOrigin) {
      //return crossOrigin ? ' crossOrigin="' + crossOrigin + '"' : '';
      return '';
  }

function getCrossOrigin(crossOrigin) {
//return crossOrigin ? ’ crossOrigin="’ + crossOrigin + ‘"’ : ‘’;
return ‘’;
}