kindeditor跨域问题解决
问题背景
因为在A系统中需要嵌入B系统的页面，两个系统有相同的父域名，所以使用了iframe+domain的方式解决跨域问题，在A系统的页面中加入了document.domain = 'exame.com.cn';;但是在嵌入kindeditor富文本编辑器后，上传图片出现跨域问题。
解决思路
通过分析kindeditor的图片上传代码，如下
<div class="tab2" style=""><iframe name="kindeditor_upload_iframe_1567676701755" style="display:none;"></iframe>
<form class="ke-upload-area ke-form" method="post" enctype="multipart/form-data"
target="kindeditor_upload_iframe_1567676701755" action="/portal/kindeditor/uploadImg?dir=image">
<div class="ke-dialog-row"><label style="width:60px;">上传文件</label><input type="text" name="localUrl"
class="ke-input-text" tabindex="-1" style="width:200px;" readonly="true"> <div
class="ke-inline-block ke-upload-button">
<div class="ke-upload-area"><span class="ke-button-common"><input type="button"
class="ke-button-common ke-button" value="浏览..."></span><input type="file"
class="ke-upload-file" name="uploadFile" style="width: 60px;"></div>
</div><input type="button" class="ke-upload-button" value="浏览..." style="display: none;"></div>
</form>
</div>
上传后的返回值会放入iframe中，所以只要在iframe中加入document.domain = 'exame.com.cn';就能解决跨域问题。
解决方法
参照kindeditor包中的uplod_json.jsp，重新写了一个UploadImgServlet，最终代码如下
- 前端代码(正常写，不需要特殊处理)
javascript
editor = KindEditor.create('textarea[rel="ehContentOnlyOne"]',{
resizeType : 1,
allowPreviewEmoticons : false,
allowImageUpload : true,//上传图片框本地上传的功能，false为隐藏，默认为true
allowImageRemote : false,//上传图片框网络图片的功能，false为隐藏，默认为true
cssPath:['cssui/main/editor.css'],
filePostName: "uploadFile",
uploadJson : '/portal/kindeditor/uploadImg',// 上传图片接口
items : [
'source','preview','code','|','fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'emoticons','image', 'link']
});
- 后端代码
```java package com.css.bbs.bbs.action;
import net.sf.json.JSONObject; import org.apache.commons.fileupload.FileItem; import org.apache.commons.fileupload.FileItemFactory; import org.apache.commons.fileupload.FileUploadException; import org.apache.commons.fileupload.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload;
import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.File; import java.io.IOException; import java.io.PrintWriter; import java.text.SimpleDateFormat; import java.util.*;
/*
* @Author: haoming
* @Date: 2019/9/3 10:36 AM
* @Version 1.0
/
public class UploadImgServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置Response响应的编码
response.setContentType("text/html; charset=UTF-8");
PrintWriter out = response.getWriter();
//文件保存目录路径
String savePath = request.getServletContext().getRealPath("/") + "attached/";
//文件保存目录URL
String saveUrl = request.getContextPath() + "/attached/";
//定义允许上传的文件扩展名
HashMap
String dirName = request.getParameter("dir");
if (dirName == null) {
dirName = "image";
}
if(!extMap.containsKey(dirName)){
out.println(getError("目录名不正确。"));
return;
}
//创建文件夹
savePath += dirName + "/";
saveUrl += dirName + "/";
File saveDirFile = new File(savePath);
if (!saveDirFile.exists()) {
saveDirFile.mkdirs();
}
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
String ymd = sdf.format(new Date());
savePath += ymd + "/";
saveUrl += ymd + "/";
File dirFile = new File(savePath);
if (!dirFile.exists()) {
dirFile.mkdirs();
}
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setHeaderEncoding("UTF-8");
List items = null;
try {
items = upload.parseRequest(request);
} catch (FileUploadException e) {
out.println(getError("上传文件失败。"));
return;
}
Iterator itr = items.iterator();
while (itr.hasNext()) {
FileItem item = (FileItem) itr.next();
String fileName = item.getName();
long fileSize = item.getSize();
if (!item.isFormField()) {
//检查文件大小
if (item.getSize() > maxSize) {
out.println(getError("上传文件大小超过限制。"));
return;
}
//检查扩展名
String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
if (!Arrays.<String>asList(extMap.get(dirName).split(",")).contains(fileExt)) {
out.println(getError("上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。"));
return;
}
SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;
try {
File uploadedFile = new File(savePath, newFileName);
item.write(uploadedFile);
} catch (Exception e) {
out.println(getError("上传文件失败。"));
return;
}
JSONObject obj = new JSONObject();
obj.put("error", 0);
obj.put("url", saveUrl + newFileName);
//解决跨域问题
out.println(obj.toString()+"<script>document.domain='cec.com.cn';</script>");
}
}
//将writer对象中的内容输出
out.flush();
//关闭writer对象
out.close();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
private String getError(String message) {
JSONObject obj = new JSONObject();
obj.put("error", 1);
obj.put("message", message);
return obj.toString();
}
}
```
- web.xml配置
```xml