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 這個屬性。好，如今註釋掉這個屬性再試，果真不行了，跨域錯誤又報出來了。

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

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

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

三、把剛纔修改爲jquery ajax上傳的代碼刪掉，用原來的代碼

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

說明一下：這裏用的是編輯器的多圖上傳，單圖上傳的沒使用，想來修改方法應該也是一樣的，須要用的能夠本身嘗試修改。

原文出處：https://www.cnblogs.com/nswdxpg/p/12317935.html