前后端分离ckeditor跨域问题处理

这个跨域问题很常见，特别是前后端分离的情况，IP地址不同导致了页面跨域，具体原因大多是因为前端ifame问题

分析

ckeditor插件里config.js需要配置

config.filebrowserImageUploadUrl="http://127.0.0.1:8085/upload"

这个地址就是往后端请求的地址，会带一个CKEditorFuncNum参数到后台，当时接收到这个之后我是用了response又给写回去了

    @PostMapping("/upload")

    public void ckeditor(@RequestParam("upload") MultipartFile filePath, HttpServletRequest request, HttpServletResponse response) throws IOException {

        String imageUrl = upload(filePath);

        String callback = request.getParameter("CKEditorFuncNum");

        // 结合ckeditor功能

        response.setContentType("text/html;charset=UTF-8");

        PrintWriter out = response.getWriter();

        out.println("<script type=\"text/javascript\">");

        out.println("window.parent.CKEDITOR.tools.callFunction(" + callback

                + ",'" + imageUrl + "',''" + ")");

        out.println("</script>");

        out.flush();

        out.close();

将文件上传后取得URL地址后，通过response将JS写回到了前端页面，这个时候总是会容易引起跨域

解决方案

在前端index.html同级目录下新增一个页面，随便取名，我叫getimage.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title></title>

</head>

<body>

<script>

    function GetQueryString(name) {

        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");

        var r = window.location.search.substr(1).match(reg);  //获取url中"?"符后的字符串并正则匹配

        var context = "";

        if (r != null)

            context = r[2];

        reg = null;

        r = null;

        return context == null || context == "" || context == "undefined" ? "" : context;

    }

    window.parent.CKEDITOR.tools.callFunction(GetQueryString("CKEditorFuncNum"),GetQueryString("ImageUrl"),GetQueryString("Message"));

</script>

</body>

</html>

再修改一下后端的接口

    @PostMapping("/upload")

    public void ckeditor(@RequestParam("upload") MultipartFile filePath, HttpServletRequest request, HttpServletResponse response) throws IOException {

        String imageUrl = upload(filePath);

        String callback = request.getParameter("CKEditorFuncNum");

        // 获取请求地址，拼接static目录下与index.html同级的getimage页面

        String backUrl = request.getHeader("Origin") + "/getimage.html";

        response.sendRedirect(backUrl+"?ImageUrl="+imageUrl+"&CKEditorFuncNum="+callback);

    }

结语

亲测这样能够解决页面跨域问题

ckeditor 上传图片解决跨域问题的更多相关文章

  1. Flask解决跨域

    Flask解决跨域 问题:网页上(client)有一个ajax请求,Flask sever是直接返回 jsonify. 然后ajax就报错:No 'Access-Control-Allow-Origi ...

  2. Editor.md解决跨域上传的问题

    Editor.md解决跨域上传的问题 编辑 editormd\plugins\image-dialog\image-dialog.js 替换以下代码片段 if (settings.crossDomai ...

  3. AngularJs最简单解决跨域问题案例

    AngularJs最简单解决跨域问题案例 2016-05-20 09:18 82人阅读 评论(0) 收藏 举报  分类: javascript(1)  作者:白狼 出处:http://www.mank ...

  4. 后台访问 JS解决跨域问题

    今天看了看以前做的一个小项目(其实就是一个页面),分享一下当时解决跨域问题的: 背景:公司把项目部署在多台服务器上,防止一台服务器崩溃后,其他的可以继续访问,对应本公司来说,某台服务器出问题后,技术人 ...

  5. PhoneGap开发跨平台移动APP - 解决跨域资源共享

    解决跨域资源共享 一.WebApi解决跨域资源共享. 开发中选择WebApi来作为服务端的数据接口,由于使用PhoneGap,就需要通过js来获取远程远程数据服务器的数据,由于同源策略的限制,这就涉及 ...

  6. 使用nginx解决跨域问题（flask为例）

    背景 我们单位的架构是在api和js之间架构一个中间层(python编写),以实现后端渲染,登录状态判定,跨域转发api等功能.但是这样一个中间会使前端工程师的工作量乘上两倍,原本js可以直接ajax ...

  7. 使用Access-Control-Allow-Origin解决跨域

    什么是跨域 当两个域具有相同的协议(如http), 相同的端口(如80),相同的host(如www.google.com),那么我们就可以认为它们是相同的域(协议,域名,端口都必须相同). 跨域就指着 ...

  8. Ajax 是什么？Ajax 的交互模型？同步和异步的区别？如何解决跨域问题？以及 HTTP状态码

    一.Ajax 是什么: 1. 通过异步模式,提升了用户体验 2. 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用 3. Ajax 在客户端运行,承担了一部分本来由服务器承担的工作 ...

  9. web api 解决跨域的问题

    web api 总是会遇到跨域的问题,今天我找到了如下方法解决跨域: 1: a:在配置文件中的 加上如下代码 <system.webServer> <httpProtocol> ...

随机推荐

  1. ubuntu chrome 安装ubuntu16.04 : google浏览器安装及离线插件安装（谷歌访问助手）

    1.https://blog.csdn.net/cheneykl/article/details/79187954 https://download.oracle.com/otn-pub/java/j ...

  2. laravel 列表搜索查询（when，with用法以及关联图像id处理图像路径）

    laravel中比较常规的列表查询: /** * 活动列表 * @param Request $request * @return \Illuminate\Http\JsonResponse */ p ...

  3. php正则表达式验证（邮件地址、Url地址、电话号码、邮政编码）

    1.电子邮件地址的校验 <?php /* 校验邮件地址*/ function checkMail($email) { //用户名,由“w”格式字符.“-”或“.”组成 $email_name= ...

  4. js创建、写入、读取文件(转)

    下面是对此知识的系统介绍(转自互联网): Javascript 是网页制作中离不开的脚本语言,依靠它,一个网页的内容才生动活泼.富有朝气.但也许你还没有发现并应用它的一些更高级的功能吧?比如,对文件和 ...

  5. 云平台Linux主机安装流程

    ==一.安装包===================================================================================如果是1+2主机安装 ...

  6. JavaScript: 认识 Object、原型、原型链与继承。

    目录 引用类型与对象 类与对象 成员组成 成员访问 实例方法 / 属性 引用类型与对象 JavaScript 存在着两种数据类型:"基本数据类型" 与 "引用数据类型&q ...

  7. asp.net core 微信H5支付（扫码支付，H5支付，公众号支付，app支付）之2

    上一篇说到微信扫码支付,今天来分享下微信H5支付,适用场景为手机端非微信浏览器调用微信H5支付惊醒网站支付业务处理.申请开通微信H5支付工作不多做介绍,直接上代码. 首先是微信支付业务类(WxPayS ...

  8. Python 时间获取

    摘自:http://www.jb51.net/article/91365.htm 摘自:https://www.cnblogs.com/liuq/p/6211005.html 一.在python中,除 ...

  9. poj 3525 半平面交求多边形内切圆最大半径【半平面交】+【二分】

    <题目链接> 题目大意:给出一个四面环海的凸多边形岛屿,求出这个岛屿中的点到海的最远距离. 解题分析: 仔细思考就会发现,其实题目其实就是让我们求该凸多边形内内切圆的最大半径是多少.但是, ...

  10. window下mongodb安装和配置

    mongodb安装和配置 1.下载:https://www.mongodb.com 2.解压到盘的根目录下,本人解压到D盘根目录 3.在软件根目录下新建一个文件夹data 4.再新建两个文件夹db.l ...