UEDITOR的JSONP跨域请求失败

每个项目产品都会让你加埋点，你是愿意花几天一个个加，还是愿意几分钟一个小时加完去喝茶聊天？来试试这520web工具, 高效加埋点，目前我们公司100号前端都在用，因为很好用，所以很自然普及开来了，推荐给大家吧

http://www.520webtool.com/

自己开发所以免费，埋点越多越能节约时间，点两下埋点就加上了，还不会犯错，里面有使用视频，反正免费 😄

最近在做VUE嵌入UEditor并且上传到七牛云，

废话不多说了 

ueditor.config.js

  window.UEDITOR_CONFIG = {
    //为编辑器实例添加一个路径，这个不能被注释

      UEDITOR_HOME_URL: URL

      // 服务器统一请求接口路径（这个接口需要自己定义）
      , serverUrl: process.env.API_ROOT + "/ueditor/ue",

nodejs/config.json

  "imageUrl": "http://localhost:8065/qiniu/uploadimage",
  "imageActionName": "uploadimage",  /* 执行上传图片的action名称 */
  "imageFieldName": "upfile", /* 提交的图片表单名称 */
  "imageMaxSize": 2048000, /* 上传大小限制，单位B */
  "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
  "imageCompressEnable": true, /* 是否压缩图片,默认是true */
  "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
  "imageInsertAlign": "none", /* 插入的图片浮动方式 */
  "imageUrlPrefix": "https://cmscloud.kuaidianying.cn/", /* （必须）图片访问路径前缀 */
  "imagePathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

nodejs(koa2)写法

var fs = require("fs")
var path = require('path')
const router = require('koa-router')()
const qiniuconfig = require('../../service/config/qiniu.json')[global.Environment];
let qiniuUtility = require('../../utility/qiniuUtility')
const koaueditor = require("ueditor-koa");

router.all('/qiniu/uploadimage', async function (ctx, next) {
    console.log("e");
})

// 支持七牛上传，如有需要请配置好qn参数，如果没有qn参数则存储在本地
router.all('/ueditor/ue', async function (ctx, next) {
//new 一个实例对象，前两参数是ctx,next，第三参数是对象，必须设置静态目录参数
    //该对象主要提供两个方法 ue_save(filepath,filename),ue_list(filepath) ,方法参数可省略
    //1.ue_save(filepath,filename)
    //参数一：filepath:自定义保存路径(相对静态目录路径)目录不存在则创建；如："/image/2018"
    //参数二：filename:指定义文件名(默认是时间戳命名)
    //2.ue_list(filepath)
    //参数：列出指定目录下的图片(相对静态目录路径),可省略，默认列出 image目录下的文件
    var ActionType = ctx.request.query.action;

    var qnConfig = {
        accessKey: qiniuconfig.accesskey,
        secretKey: qiniuconfig.secretkey,
        bucket: 'cmscloud',
        origin: 'https://up-z2.qiniup.com'

    }

    var uedictx = new koaueditor(ctx, next, {
        statc_path: "/public",//静态目录,文件保存根目录
    });

    if (ActionType == "uploadimage" || ActionType == "uploadvideo" || ActionType == "uploadfile") {
        qiniuUtility.uploadFile(ctx.request.files.upfile.path, ctx.request.files.upfile.name, 'cmscloud', {
            success:function (res) {
            }
        })
        ctx.body = JSON.stringify({
            title:ctx.request.files.upfile.name,
            original:'qmcms',
            state:'SUCCESS',
            url:ctx.request.files.upfile.name,
            code:400
        })
    } else if (ActionType == "listimage") {

        await uedictx.ue_list();//默认列出 image目录下的文件
        //await uedictx.ue_list('fileimage');//指定列出 /public/fileimage 目录下的图片
    } else {
        var configData = fs.readFileSync(path.join(__dirname,'../lzbvue/static/ueditor/nodejs/config.json'), 'utf-8');
        var callback = ctx.request.query.callback;
        if (callback) {
            ctx.body = callback + "&&" + callback + '('+configData+')';
        } else {
            ctx.body = configData;
        }

    }
})


module.exports = router;

UEditor请求会判断你是否是跨域，跨域就用JSONP，AJAX的JSONP请求会默认带一个callback

服务器需要通过上面的方式来写才能解决JSONP的跨域问题，否则不起作用

    var configData = fs.readFileSync(path.join(__dirname,'../lzbvue/static/ueditor/nodejs/config.json'), 'utf-8');
        var callback = ctx.request.query.callback;
        if (callback) {
            ctx.body = callback + "&&" + callback + '('+configData+')';
        } else {
            ctx.body = configData;
        }