解决Django2.0.4+kindeditor4.11 跨域上传文件的问题

首页 - Python/2019-04-18

标签: 问题上传文件 Django2.0 跨域 kindeditor4.11 解决

在之前的一篇文章中介绍了如何将富文本kindeditor结合到django中：Django2.0.4 结合 KindEditor 4.1.11 富文本编辑器

在同域环境中是没有问题的，换句话说，也就是上传接口如果部署在前端页面同一个域名下是没有问题的，然而美多商城的系统架构是前后端分离，前端页面是vue.js服务，后端接口是django服务，分别部署在不同的服务器上，如果在vue.sj页面中想要使用kindeditor中的上传文件功能，跨域请求django的接口就会报错。

本文解决在跨域情况下使用kindeditor的上传文件功能，解决思路就是用重定向方法来伪造成同域环境

在前端项目中，建立一个redirect.html,用来伪造同域获取参数

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>跨域重定向</title>
    <script type="text/javascript">
    function getParameter(val) {
        var uri = decodeURI(window.location.search);
        var re = new RegExp("" + val + "=([^&?]*)", "ig");
        return ((uri.match(re)) ? (uri.match(re)[0].substr(val.length + 1)) : null);
    }

        var upload_callback = function() {
            var error = getParameter("error");
            error = parseInt(error)
            var dataObject;
            if(error==0){
                var url = getParameter("url");
                dataObject = {"error": error, "url": url};
            }else{
                var message = getParameter("message");
                dataObject = {"error": error, "message": message};
            }
            var data =  JSON.stringify(dataObject)
            document.getElementsByTagName("body")[0].innerHTML = '<pre>' + data + '</pre>';
        }
    </script>
</head>
<body onload="upload_callback();">
</body>
</html>

富文本页面并不需要改变什么

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./static/js/jquery-1.12.1.min.js"></script>
    <script src='./static/js/kindeditor/kindeditor-all-min.js'></script>
    <title>美多编辑器</title>
</head>
<body>
    

    <textarea id='content'>富文本</textarea>
<button onclick="checkit()">查看</button>
	  
	
	<script>

        initKindEditor();
     
        function initKindEditor() {
            var kind = KindEditor.create('#content', {
                uploadJson: 'http://localhost:8000/md_admin/front_upload',
                items : [ 'source', 'image'],
                width: '100%',       // 文本框宽度(可以百分比或像素)
                height: '300px',     // 文本框高度(只能像素)
                minWidth: 200,       // 最小宽度（数字）
                minHeight: 400      // 最小高度（数字）
            });
		}
		
		function checkit(){
			var content = $(document.getElementsByTagName("iframe")[0].contentWindow.document.body).html()

			alert(content);


		}
    </script>

</body>
</html>

重点是后台接口文件，不再需要返回json数据，而是直接重定向到之前伪造好的前端页面redirect.html

#跨域上传方法
def frontupload(request):
    if request.method == 'POST':
        item = {}
        file = request.FILES.get('imgFile')
        #定义跳转网址，就是前端伪造好的页面
        callBackPath = 'http://localhost:8080/redirect.html'
        f = open(os.path.join(UPLOAD_ROOT,'',file.name),'wb')
        item['message'] = '上传成功'
        item['url'] = 'http://localhost:8000/upload/'+ file.name
        item['error'] = 0
        #写文件 遍历图片文件流
        for chunk in file.chunks():
            f.write(chunk)
        return HttpResponseRedirect(callBackPath + "?error=0&url="+item['url'])

到此，问题解决，无论富文本在前端调用还是后端，都可以完美上传文件