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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html> <head> <meta http-equiv = “Content-Type” content = “text / html; charset = UTF-8” > <title> 跨域重定向</ title> <script type = “text / javascript “ > 函数的getParameter （VAL ）{ VAR URI = decodeURI （窗口。位置。搜索）; var re = new RegExp （“” + val + “=（[^＆

      
    
     
     
        
             “ig” ）; 返回（（URI 。匹配（重）） ？（ URI 。匹配（重）[ 0 ] SUBSTR （VAL 。长度+ 1 ）） ：空）; }
              
    

        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 ）
            文档。getElementsByTagName （“body” ）[ 0 ]。innerHTML = '<pre>' + data + '</ pre>' ; } </ script>  
            
               
        
    

<body onload = “ upload_callback （）; ” > </ body> </ html>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<！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％' ，//文本框宽度（可以百分比或像素）
                身高：'300px' ，//文本框高度（只能像素）
                minWidth ：200 ，//最小宽度（数字） 
                                        
                minHeight ：400 //最小高度（数字）}）; }       
            
		
		
		功能checkit （）{ VAR 含量= $ （文件。的getElementsByTagName （“IFRAME” ）[ 0 ]。contentWindow 。文件。体）。html （）
			

			警报（内容）;


		} </ script>
    

</ body> </ html>

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

1
2
3
4
5
6
7
8
9
10
11
12
#pan domain上传方法def frontupload （request ）：if request 。method == 'POST' ：
        item = {} 
        file = request 。文件。得到（'imgFile' ）＃定义跳转网址，就是前端伪造好的页面
        callBackPath = 的'http：//本地主机：8080 /将redirect.html' 
        ˚F = 开放（OS ，路径，加入（UPLOAD_ROOT ，'' ，文件。

      
         name ），'wb' ）
        item [ 'message' ] = '上传成功' 
        item [ 'url' ] = 'http：// localhost：8000 / upload /' + file 。名称    
        item [ 'error' ] = 0 ＃write文件遍历图片文件流for chunk in file 。chunks （）：
            f 。write （chunk ）返回HttpResponseRedirect （callBackPath + “？error = 0＆url =” + item [ 'url' ]）

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