1. 程式人生 > >利用ueditor富文字編輯器上傳圖片解決跨域問題

利用ueditor富文字編輯器上傳圖片解決跨域問題

          百度ueditor富文字編輯器單張圖片上傳有固有缺陷,那就是不支援跨域配置,下圖是UEditor官網說明。

       但是我們在實際開發中,前後臺分離,跨域上傳圖片是很平常的,那麼怎麼解決跨域問題呢?答案是通過nginx配置域名來解決。

       在網際網路專案中,我們訪問專案一般不會直接通過IP和埠來訪問,而是通過域名來訪問,這樣不僅可以提升安全度,也有利於記住網址。前後臺分離的好處是前臺可以專心搞他們的事情,不用受後臺開發的影響,前臺修改了什麼東西直接放到伺服器上就可以了,不用等著和後臺程式碼一塊放上去,這樣大大節省了開發時間。但是前後臺分離帶來的一個首要問題便是跨域問題。百度Ueditor是不支援跨域上傳配置的,牛人可以通過前後臺修改來間接實現跨域上傳圖片,可惜,我不是什麼牛人。

       比較可行的辦法便是配置子域名,什麼意思呢,前臺一般都會配置一個統一的域名,這個域名下放置各種各樣的專案,比如web.billionhealth.com,那麼我們便新配置一個域名web.billionhealth.com/ueditor/upload,也就是說配置了前臺域名的一個子域名。從網上查資料可知,瀏覽器訪問一個域名或其子域名不算跨域!!!這樣我們把百度富文字編輯器的兩個配置檔案便放到一個固定的專案下,比如我有個專案名稱是storage-sc,如下圖所示。

         需要注意的是,圖片回顯需要絕對路徑,因此我們還需要配置一下圖片訪問字首,這個需要在config.json中配置,如下圖所示。

        在前端的ueditor的ueditor.config.js檔案中,我們需要修改下訪問的controller.jsp的路徑,如下圖所示。

        這樣上傳圖片就可以正常上傳並回顯了(這其實是在騙瀏覽器,讓瀏覽器認為這兩個域名是父子關係,不涉及跨域,從而就解決了跨域問題)