>ueditor 上傳圖片跨域問題 [TOC] UEditor是由百度WEB前端研發部開發的所見即所得的開源富文本編輯器，具有輕量、可定制、用戶體驗優秀等特點。開源基于BSD協議，所有源代碼在協議允許范圍內可自由修改和使用。百度UEditor的推出，可以幫助不少網站開發者在開發富文本編輯器所遇到的難題，節約開發者因開發富文本編輯器所需要的大量時間，有效降低了企業的開發成本。 ## 一，ueditor自身是不支持跨域的，但是做一下簡單的修改就可以實現 客戶端：a.com 服務端：b.com ## 二，在客戶端a.com，修改 ### 1，修改ueditor.config.js ``` // , serverUrl: URL + "php/controller.php" , serverUrl: "http://b.com/php/controller.php" ``` ### 2，修改ueditor.all.js或者ueditor.min.js 搜索edui_form_，在form表單里面加上以下 ``` wrapper.innerHTML = '<form id="edui_form_' + timestrap + '" target="edui_iframe_' + timestrap + '" method="POST" enctype="multipart/form-data" action="' + me.getOpt('serverUrl') + '" ' + 'style="' + btnStyle + '"><input type="hidden" name="issimpleupload" value="true" />' + '<input id="edui_input_' + timestrap + '" type="file" accept="image/*" name="' + me.options.imageFieldName + '" ' + 'style="' + btnStyle + '">' + '</form>' + ``` >加上<input type="hidden" name="issimpleupload" value="true" /> ## 二，在服務端b.com，修改controller.php ### 1， 頂部加上跨域 ``` header("Access-Control-Allow-Origin：*"); header("Access-Control-Allow-Headers：X-Requested-With,X_Requested_With"); ``` ### 2，修改以下代碼 ``` if (isset($_GET["callback"])) { if (preg_match("/^[\w_]+$/", $_GET["callback"])) { echo htmlspecialchars($_GET["callback"]) . '(' . $result . ')'; } else { echo json_encode(array( 'state'=> 'callback參數不合法' )); } } else { if(!emptyempty($_REQUEST['issimpleupload'])){ header("location:http://a.com/result.php?result=".urlencode($result)); //這步比較難以理解 exit; } } ``` **在這里為什么要跳轉回去呢？這是因為，ueditor是通過iframe，進行遠程上傳的，如果不跳轉而是直接輸出內容，這樣ueditor獲取不到iframe中的內容，因為跨域。所以要跳轉回去，并把值回去，這樣子ueditor就能獲取到了。** ## 三，添加一個result.php ``` <?php echo $_REQUEST['result']; ?> ``` 只要能輸出值就行了。 ## 四，原文閱讀 作者:[海底蒼鷹](http://blog.51yip.com/php/1937.html)