百度ueditor富文本 单图上传iframe跨域问题

最近在使用百度ueditor富文本编辑器，由于是一个前后端分离的项目，并且需要使用单图上传的功能，所以不可避免的会产生跨域问题，先来看看官方给的说法：

    单图上传暂时不支持跨域设置，为了兼容低版本浏览器，使用了提交表单到iframe提交。通过iframe的onload事件，触发回调函数，这时候再读取iframe里面的内容，得到的服务器返回数据。 跨域情况下，产生了跨域的iframe访问，可以解决方法都需要前后端一起改变。要解决这个问题，小伙伴们发挥想象力吧。

可以说相当的不负责任了哈哈，先不吐槽这个。

首先来看看问题是怎么产生的,谷歌chrome下配置好ueditor之后直接点击单图上传，没有任何反应，别急，看一眼Network

image

可以看到服务器有返回信息，但为什么编辑器中没有回显成功呢？

我们定位到ueditor.all.js这个文件，看看单图上传时都做了些什么
定位到这一段代码(在24500行左右，我的源文件修改过了，可能有所不同)

domUtils.on(input, 'change', function(){
    if(!input.value) return;
    var loadingId = 'loading_' + (+new Date()).toString(36);
    var params = utils.serializeParam(me.queryCommandValue('serverparam')) || '';

    var imageActionUrl = me.getActionUrl(me.getOpt('imageActionName'));   2
    var allowFiles = me.getOpt('imageAllowFiles');

    me.focus();
    me.execCommand('inserthtml', '');

    function callback(){
        try{
            var link, json, loader,
                body = (iframe.contentDocument || iframe.contentWindow.document).body,
                result = body.innerText || body.textContent || '';
            json = (new Function("return " + result))();

            link = me.options.imageUrlPrefix + json.url;
            if(json.state == 'SUCCESS' && json.url) {
                loader = me.document.getElementById(loadingId);
                loader.setAttribute('src', link);
                loader.setAttribute('_src', link);
                loader.setAttribute('title', json.title || '');
                loader.setAttribute('alt', json.original || '');
                loader.removeAttribute('id');
                domUtils.removeClasses(loader, 'loadingclass');
            } else {
                showErrorLoader && showErrorLoader(json.state);
            }
        }catch(er){
            showErrorLoader && showErrorLoader(me.getLang('simpleupload.loadError'));
        }
        form.reset();
        domUtils.un(iframe, 'load', callback);
    }
    function showErrorLoader(title){
        if(loadingId) {
            var loader = me.document.getElementById(loadingId);
            loader && domUtils.remove(loader);
            me.fireEvent('showmessage', {
                'id': loadingId,
                'content': title,
                'type': 'error',
                'timeout': 4000
            });
        }
    }

    /* 判断后端配置是否没有加载成功 */
    if (!me.getOpt('imageActionName')) {
        console.log(1)
        errorHandler(me.getLang('autoupload.errorLoadConfig'));
        return;
    }
    // 判断文件格式是否错误
    var filename = input.value,
        fileext = filename ? filename.substr(filename.lastIndexOf('.')):'';
    if (!fileext || (allowFiles && (allowFiles.join('') + '.').indexOf(fileext.toLowerCase() + '.') == -1)) {
        console.log(2)
        showErrorLoader(me.getLang('simpleupload.exceedTypeError'));
        return;
    }

    domUtils.on(iframe, 'load', callback);
    form.action = utils.formatUrl(imageActionUrl + (imageActionUrl.indexOf('?') == -1 ? '?':'&') + params);
    form.submit();
});

可以看到有一个try，catch语句，正是在这里出现了跨域错误

console.log((iframe.contentDocument || iframe.contentWindow.document).body);
try{
    var link, json, loader,                          
        body = (iframe.contentDocument || iframe.contentWindow.document).body,
        result = body.innerText || body.textContent || '';
    json = (new Function("return " + result))();

    link = me.options.imageUrlPrefix + json.url;
    if(json.state == 'SUCCESS' && json.url) {
        loader = me.document.getElementById(loadingId);
        loader.setAttribute('src', link);
        loader.setAttribute('_src', link);
        loader.setAttribute('title', json.title || '');
        loader.setAttribute('alt', json.original || '');
        loader.removeAttribute('id');
        domUtils.removeClasses(loader, 'loadingclass');
    } else {
        showErrorLoader && showErrorLoader(json.state);
    }
}catch(er){
    showErrorLoader && showErrorLoader(me.getLang('simpleupload.loadError'));
}

随便console一下，出现如下报错

Uncaught DOMException: Blocked a frame with origin "###" from accessing a cross-origin frame.at HTMLIFrameElement.callback (###)。

image

这个其实就是游览器出于安全考虑，禁止iframe跨域访问，而官方也说了：

image

那么怎么解决iframe跨域的问题呢，找到了问题所在，解决起来就简单了，我试了两种方法，介绍一下：

第一种，使用new FormData()来提交；

除开不兼容ie9及以下版本之外，几乎是最好用的，废话不多说，直接贴代码；直接替换掉上文的那一段源文件代码就ok

domUtils.on(input, 'change', function() {
    if(!input.value) return;
    var loadingId = 'loading_' + (+new Date()).toString(36);
    var imageActionUrl = me.getActionUrl(me.getOpt('imageActionName'));
    var allowFiles = me.getOpt('imageAllowFiles');

    me.focus();
    me.execCommand('inserthtml', '');

    //!* 判断后端配置是否没有加载成功 *!/
    if (!me.getOpt('imageActionName')) {
    console.log(11)
        errorHandler(me.getLang('autoupload.errorLoadConfig'));
        return;
    }
    // 判断文件格式是否错误
    var filename = input.value,
        fileext = filename ? filename.substr(filename.lastIndexOf('.')):'';
    if (!fileext || (allowFiles && (allowFiles.join('') + '.').indexOf(fileext.toLowerCase() + '.') == -1)) {
        showErrorLoader(me.getLang('simpleupload.exceedTypeError'));
        return;
    }

    var params = utils.serializeParam(me.queryCommandValue('serverparam')) || '';
    var action = utils.formatUrl(imageActionUrl + (imageActionUrl.indexOf('?') == -1 ? '?' : '&') + params);
    var formData = new FormData();
    formData.append("upfile", form[0].files[0] );
    $.ajax({
        url: action,
        type: 'POST',
        cache: false,
        data: formData,
        processData: false,
        contentType: false,
        success: function (data) {
        data = JSON.parse(data);
        var link, loader,
            body = (iframe.contentDocument || iframe.contentWindow.document).body,
            result = body.innerText || body.textContent || '';
        link = me.options.imageUrlPrefix + data.url;
        if(data.state == 'SUCCESS' && data.url) {
            loader = me.document.getElementById(loadingId);
            loader.setAttribute('src', link);
            loader.setAttribute('_src', link);
            loader.setAttribute('title', data.title || '');
            loader.setAttribute('alt', data.original || '');
            loader.removeAttribute('id');
            domUtils.removeClasses(loader, 'loadingclass');
        } else {
            showErrorLoader && showErrorLoader(data.state);
        }
        form.reset();
        }
    });
    function showErrorLoader(title){
        if(loadingId) {
        var loader = me.document.getElementById(loadingId);
        loader && domUtils.remove(loader);
        me.fireEvent('showmessage', {
            'id': loadingId,
            'content': title,
            'type': 'error',
            'timeout': 4000
        });
        }
    }
});

第二种方式 依然使用iframe来进行提交

为什么还要使用iframe，因为我们的ie(6~9)不支持new FormData(),那就还得从iframe这种方式入手，官方也提到了从iframe入手其实也可以解决：跨域情况下，产生了跨域的iframe访问，可以解决方法都需要前后端一起改变。要解决这个问题，小伙伴们发挥想象力吧。
跨域情况下，其实是无法访问iframe内的body内容的，也就是图片可以上传到后台，但是前端无法获取回调信息，也就是说正常途径下，前端无法实现回显。
那么解决思路就来了，既然是由iframe跨域产生的问题，那我们就可以从iframe跨域入手，后端处理这条请求后，重定向至前端的一个空html页面，将所有的回调参数放到url中~