ckeditor 上传图片解决跨域问题
前后端分离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 上传图片解决跨域问题的更多相关文章
- Flask解决跨域
Flask解决跨域 问题:网页上(client)有一个ajax请求,Flask sever是直接返回 jsonify. 然后ajax就报错:No 'Access-Control-Allow-Origi ...
- Editor.md解决跨域上传的问题
Editor.md解决跨域上传的问题 编辑 editormd\plugins\image-dialog\image-dialog.js 替换以下代码片段 if (settings.crossDomai ...
- AngularJs最简单解决跨域问题案例
AngularJs最简单解决跨域问题案例 2016-05-20 09:18 82人阅读 评论(0) 收藏 举报 分类: javascript(1) 作者:白狼 出处:http://www.mank ...
- 后台访问 JS解决跨域问题
今天看了看以前做的一个小项目(其实就是一个页面),分享一下当时解决跨域问题的: 背景:公司把项目部署在多台服务器上,防止一台服务器崩溃后,其他的可以继续访问,对应本公司来说,某台服务器出问题后,技术人 ...
- PhoneGap开发跨平台移动APP - 解决跨域资源共享
解决跨域资源共享 一.WebApi解决跨域资源共享. 开发中选择WebApi来作为服务端的数据接口,由于使用PhoneGap,就需要通过js来获取远程远程数据服务器的数据,由于同源策略的限制,这就涉及 ...
- 使用nginx解决跨域问题(flask为例)
背景 我们单位的架构是在api和js之间架构一个中间层(python编写),以实现后端渲染,登录状态判定,跨域转发api等功能.但是这样一个中间会使前端工程师的工作量乘上两倍,原本js可以直接ajax ...
- 使用Access-Control-Allow-Origin解决跨域
什么是跨域 当两个域具有相同的协议(如http), 相同的端口(如80),相同的host(如www.google.com),那么我们就可以认为它们是相同的域(协议,域名,端口都必须相同). 跨域就指着 ...
- Ajax 是什么?Ajax 的交互模型?同步和异步的区别?如何解决跨域问题?以及 HTTP状态码
一.Ajax 是什么: 1. 通过异步模式,提升了用户体验 2. 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用 3. Ajax 在客户端运行,承担了一部分本来由服务器承担的工作 ...
- web api 解决跨域的问题
web api 总是会遇到跨域的问题,今天我找到了如下方法解决跨域: 1: a:在配置文件中的 加上如下代码 <system.webServer> <httpProtocol> ...
随机推荐
- php数组去重(一维数组)
<?php $arr = ['1', '1', 'PHP', 'PHP', 2, 3]; print_r($arr); echo "<br>"; print_r( ...
- PHP数学常用函数
PHP数学常用函数 函数名 描述 实例 abs() 求绝对值 $abs = abs(-4.2); //4.2 fmod() 浮点数取余 $x = 5.7;$y = 1.3;$r = fmod($x, ...
- 用PNChart绘制饼状图简介
写在前面 最近做的小Demo中有一个绘制饼状图的需求.在开始实现之前上网了解了一下现有的一些绘制图形的第三方库,相应的库还是有挺多的,PNChart便是其中一个.PNChart是一个90后的中国boy ...
- python 全栈开发,Day68(Django的路由控制)
昨日内容回顾 1 MVC和MTV MTV 路由控制层(分发哪一个路径由哪一个视图函数处理) V : views (逻辑处理) T : templates (存放html文件) M : model (与 ...
- [转] 插件兼容CommonJS, AMD, CMD 和 原生 JS
模块标准 CommonJS CommonJS 有三个全局变量 module.exports 和 require.但是由于 AMD 也有 require 这个全局变量,故不使用这个变量来进行检测. 如果 ...
- php 代码中的箭头“ ->”是什么意思
类是一个复杂数据类型,这个类型的数据主要有属性.方法两种东西. 属性其实是一些变量,可以存放数据,存放的数据可以是整数.字符串,也可以是数组,甚至是类. 方法实际上是一些函数,用来完成某些功能. 引用 ...
- Repository HDU2846
极限过的 最原始的方法一层一层建树就好了 #include<bits/stdc++.h> using namespace std; ][]={}; ]={}; ]; ; int pos; ...
- C#连接数据库MD5数据库加密
创建StringHelper类 首先数据库里的资料是加密了的. 创建将指定的字符串加密为MD5密文方法 public static string ToMD5(string source){ Strin ...
- [OpenCV-Python] OpenCV 中计算摄影学 部分 IX 对象检测 部分 X
部分 IX计算摄影学 OpenCV-Python 中文教程(搬运)目录 49 图像去噪目标 • 学习使用非局部平均值去噪算法去除图像中的噪音 • 学习函数 cv2.fastNlMeansDenoisi ...
- 爬虫之Resquests模块的使用(二)
Requests Requests模块 Requests模块是一个用于网络访问的模块,其实类似的模块有很多,比如urllib,urllib2,httplib,httplib2,他们基本都提供相似的功能 ...