ueditor上傳圖片跨域問題解決

做前后端分離的項目用到UEditor，把上傳圖片程序拿出來放到了接口程序中，上傳圖片接口已經做了跨域處理，按理說編輯器中上傳圖片應該不會有問題。可是配置好圖片上傳路徑后，運行，打開調試，測試一下，報錯了：

 找到上傳圖片的代碼，發現引用的是webuploader.js，先修改下，直接引用webuploader.js。

 經過調試找到，實際上傳圖片走的就是這里了，webuploader.js文件。

 起初在網上查，嘗試了各種方案修改前后端代碼，都不成功。偶然想起用jquery ajax上傳試試吧，正好程序已經引用了jquery。於是修改上面那行代碼：

$.ajax({
    url:server,
    dataType:'json',
    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 );

一試之下，竟然成功了，看來后端的跨域設置肯定沒問題。

 那這樣也不行啊，前端進度什么的都沒了。

 找到更新進度的代碼，就這里了。

那讓jquery ajax使用這里的xhr對象行不行呢，試一下，修改上傳部分代碼：

$.ajax({
    url:server,
    dataType:'json',
    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 );        

 上傳圖片測試一下，ok，成功啦。

看起來似乎就這么結束了，可這對我來說這算是意外之喜，我真沒覺得這樣就能成功。寫文章之前真正用的時候可沒這么容易就解決這個問題。

好吧，對比了下，發現之前寫的代碼沒有 async: false 這個屬性。好，現在注釋掉這個屬性再試，果然不行了，跨域錯誤又報出來了。

 下面說另一種能異步上傳的解決方案，研究過程就不說了。

1、找到這行代碼，注釋掉，去掉請求頭的設置。

 2、找到負責更新進度的代碼，注釋掉這一段

3、把剛才修改成jquery ajax上傳的代碼刪掉，用原來的代碼

 再試，ok，是成功的，更新進度的功能依然存在。

說明一下：這里用的是編輯器的多圖上傳，單圖上傳的沒使用，想來修改方法應該也是同樣的，需要用的可以自己嘗試修改。