django+vue+ueditor的那些坑

最新推荐文章于 2023-09-21 00:45:58 发布

z295007408

最新推荐文章于 2023-09-21 00:45:58 发布

阅读量302

点赞数

文章标签： jsonp

本文链接：https://blog.csdn.net/z295007408/article/details/108494101

版权

本文介绍了在一个前后端分离的项目中，如何处理ueditor跨域问题。ueditor会自动使用JSONP进行跨域通信。在Django后端，需要设置返回ueditor的请求信息，包含callback参数，并修改Content-Type为javascript。前端通过指定action为config获取ueditor配置，并将配置保存在响应的message中。

摘要由CSDN通过智能技术生成

项目是前后端分离的，跨域的，然后ueditor会自动检测跨域，跨域了的话就会用jsonp通信。可以在django后端输出ueditor的请求信息。

<QueryDict: {'action': ['config'], 'callback': ['bd__editor__wpdik9']}>

可以看到里面有个callback，意思是我们的数据要用callback里面的字符封装通过javascript发回给前端。
具体操作如下：

class UEditorView(RetrieveDestroyAPIView):
    def get(self, request, *args, **kwargs):
        func = request.GET.get("callback")
        message = {"status": 200, "name": "eason", "age": 34}
        response = HttpResponse("%s(%s)" % (func, json.dumps(message)), content_type="application/javascript")
        return response

里面主要做了两个操作，获取callback把附件封装起来，把请求头的Content-Type改成javascript

然后这时候前后端就可以进行jsonp的交互了，前端action是config就请求ueditor的配置文件，把配置保存在上面代码里的message里即可。
参考配置如下:

/* 前后端通信相关的配置,注释只允许使用多行方式 */
{
  /* 上传图片配置项 */
  "imageActionName": "uploadimage", /* 执行上传图片的action名称 */
  "imageFieldName": "upfile", /* 提交的图片表单名称 */
  "imageMaxSize": 2048000, /* 上传大小限制，单位B */
  "imageAllowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp" ], /* 上传图片格式显示 */
  "imageCompressEnable": true, /* 是否压缩图片,默认是true */
  "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
  "imageInsertAlign": "none", /* 插入的图片浮动方式 */
  "imageUrlPrefix": "/", /* 图片访问路径前缀 */
  "imageSaveAbsolutePath": "