Editor.md 是一款开源的、可嵌入的 Markdown 在线编辑器(组件),基于 CodeMirror、jQuery 和 Marked 构建。
但是,在使用Editor.md的时候配置图片上传时候遇到了一个问题:在图片上传时,出现跨域问题!
但是,我服务器后台能接收到前端传来的参数
由此证明,图片数据是能传递过来服务器的,但是为什么前端会报跨域问题呢?
首先看一下报错的代码,打开 image-dialog.js:164
uploadIframe.onload = function() {
loading(false);
var body = (uploadIframe.contentWindow ? uploadIframe.contentWindow : uploadIframe.contentDocument).document.body;
var json = (body.innerText) ? body.innerText : ( (body.textContent) ? body.textContent : null);
json = (typeof JSON.parse !== "undefined") ? JSON.parse(json) : eval("(" + json + ")");
if(!settings.crossDomainUpload)
{
if (json.success === 1)
{
dialog.find("[data-url]").val(json.url);
}
else
{
alert(json.message);
}
}
return false;
};
164行的代码是
var body = (uploadIframe.contentWindow ? uploadIframe.contentWindow : uploadIframe.contentDocument).document.body;
第一眼看到这行代码,不知道是获取什么,先把 uploadIframe.contentWindow 和 uploadIframe.contentDocument 这两个打印输出一下,看一下是什么东西,在代码里面加入console.log()代码,再上传图片看看!
由于调用uploadIframe.contentWindow会报跨域错误,所以,只能看到uploadIframe.contentDocument的值为null
所以,无法得到uploadIframe.contentWindow的值,经过一番百度搜索,知道这个值其实就是Editor.md配置的服务器请求接口值
然后,再进一步了解到,image-dialog.js这个文件访问图片上传中的数据造成的跨域问题。
知道了问题所在,就好办了,开始分析源码。
在该函数的接下一行:会调用该函数
dialog.find("[type=\"submit\"]").bind("click", submitHandler).trigger("click");
首先,是寻找一个type类型是submit提交的元素,然后绑定事件click点击调用submitHandler函数
我们来输出一下,这行代码找到的sunmit的元素是什么:
console.log(dialog.find("[type=\"submit\"]"));
得到一