上傳圖片到圖片服務(wù)器，因?yàn)橛蛎煌?#xff0c;多以會(huì)有跨域問(wèn)題。

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

?

照看代碼發(fā)現(xiàn)，cropper.js里面對(duì)圖片的引用路徑做了判斷，給img標(biāo)簽添加了?crossorigin="anonymous"（匿名跨域?qū)傩?#xff09;。

并且用了XMLHttpRequest 的get請(qǐng)求去訪問(wèn)img的引用路徑，這樣確實(shí)訪問(wèn)不到。需要在圖片服務(wù)器，或者返回的請(qǐng)求頭添加?Access-Control-Allow-Origin:*，或Access-Control-Allow-Origin:請(qǐng)求來(lái)源域名。

?

有一種簡(jiǎn)單快速的解決辦法，就是直接去掉cropper.js里面跨域?qū)傩?#xff0c;因?yàn)槟J(rèn)情況下圖片跨域也是可以顯示的。

對(duì)于低版本的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就好了。

?

對(duì)于高版本（我用的Cropper v2.3.4）因?yàn)榇a調(diào)整了，找到?function getCrossOrigin(crossOrigin)，將里面返回跨域代碼的那行注釋掉，返回空字符串就好了。

我是這樣改的：

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

可以顯示出來(lái)了

更多專(zhuān)業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的上传图片截图预览控件不显示cropper.js 跨域问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。