ueditor单图上传iframe跨域_ueditor上传图片跨域问题解决

做前后端分离的项目用到UEditor&＃xff0c;把上传图片程序拿出来放到了接口程序中&＃xff0c;上传图片接口已经做了跨域处理&＃xff0c;按理说编辑器中上传图片应该不会有问题。可是配置好图片上传路径后&＃xff0c;运行&＃xff0c;打开调试&＃xff0c;测试一下&＃xff0c;报错了&＃xff1a;

找到上传图片的代码&＃xff0c;发现引用的是webuploader.js&＃xff0c;先修改下&＃xff0c;直接引用webuploader.js。

经过调试找到&＃xff0c;实际上传图片走的就是这里了&＃xff0c;webuploader.js文件。

起初在网上查&＃xff0c;尝试了各种方案修改前后端代码&＃xff0c;都不成功。偶然想起用jquery ajax上传试试吧&＃xff0c;正好程序已经引用了jquery。于是修改上面那行代码&＃xff1a;

$.ajax({

url:server,

dataType:&＃39;json&＃39;,

type:opts.method,

async: false,

data: formData,

processData : false, // 使数据不做处理

contentType : false, // 不要设置Content-Type请求头

success: function(data){

console.log(data);

},

error:function(response){

console.log(response);

}

});

// xhr.send( formData );

一试之下&＃xff0c;竟然成功了&＃xff0c;看来后端的跨域设置肯定没问题。

那这样也不行啊&＃xff0c;前端进度什么的都没了。

找到更新进度的代码&＃xff0c;就这里了。

那让jquery ajax使用这里的xhr对象行不行呢&＃xff0c;试一下&＃xff0c;修改上传部分代码&＃xff1a;

$.ajax({

url:server,

dataType:&＃39;json&＃39;,

type:opts.method,

async: false,

data: formData,

xhr: function(){

return xhr; // 使用上面初始化好的 xhr 对象

},

processData : false, // 使数据不做处理

contentType : false, // 不要设置Content-Type请求头

success: function(data){

console.log(data);

},

error:function(response){

console.log(response);

}

});

// xhr.send( formData );

上传图片测试一下&＃xff0c;ok&＃xff0c;成功啦。

看起来似乎就这么结束了&＃xff0c;可这对我来说这算是意外之喜&＃xff0c;我真没觉得这样就能成功。写文章之前真正用的时候可没这么容易就解决这个问题。

好吧&＃xff0c;对比了下&＃xff0c;发现之前写的代码没有 async: false 这个属性。好&＃xff0c;现在注释掉这个属性再试&＃xff0c;果然不行了&＃xff0c;跨域错误又报出来了。

下面说另一种能异步上传的解决方案&＃xff0c;研究过程就不说了。

1、找到这行代码&＃xff0c;注释掉&＃xff0c;去掉请求头的设置。

2、找到负责更新进度的代码&＃xff0c;注释掉这一段

3、把刚才修改成jquery ajax上传的代码删掉&＃xff0c;用原来的代码

再试&＃xff0c;ok&＃xff0c;是成功的&＃xff0c;更新进度的功能依然存在。

说明一下&＃xff1a;这里用的是编辑器的多图上传&＃xff0c;单图上传的没使用&＃xff0c;想来修改方法应该也是同样的&＃xff0c;需要用的可以自己尝试修改。