spring mvc:ueditor跨域多图片上传失败解决方案
公司在开发一个后台系统时需要使用百度的UEditor富文本编辑器,应用的场景如下:
- UEditor的所有图片、js等静态资源在一个专有的静态服务器上;
- 图片上传在另外一台服务器上;
因为公司内部会使用chrome来进行后台管理,因此在跨域解决方案上,选择了设置h5中的Access-Control-Allow-Origin header。
但在开发测试时,发现在上传多图片时,浏览器确实向指定的后端发送了上传的请求,但UEditor却一直报上传失败的错误,因为是第一次做这种跨域的项目,因此有些想不通,在仔细查看请求后发现,浏览器发送的这个上传请求的请求方式不是常见的get、post方式,而是OPTIONS.
OPTIONS请求有什么作用?百度后精简的两句话介绍其作用:
- 获取服务器支持的HTTP请求方法;也是黑客经常使用的方法。
- 用来检查服务器的性能。例如:AJAX进行跨域请求时的预检,需要向另外一个域名的资源发送一个HTTP OPTIONS请求头,用以判断实际发送的请求是否安全。
从上述表述来看,其实这个OPTIONS请求只是试探作用,并不会携带任何真实的上传数据,在本项目中是为了确认将要接收上传数据的后端是否允许跨域,如果OPTIONS请求获取的header中Access-Control-Allow-Origin符合要求,将会再发送一次POST请求,将真实数据上传。
但浏览器在这个项目中只发送了一次OPTIONS请求,说明这个请求中Access-Control-Allow-Origin不符合要求,也就是不允许跨域,经检查,已经在spring mvc中使用拦截器对每一个请求都设置了可跨域的header。
因此我在这个拦截器中进行断点,结果是OPTIONS请求压根没有进入到这个断点,由此说明OPTIONS请求被spring mvc框架拒之门外了。
找到原因后,再次度娘,果然,spring mvc框架默认不支持OPTIONS请求,如果需要支持,需要在项目的web.xml文件中加入如下初始化参数:
<servlet>
<servlet-name>ModelViewController</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet
</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:/spring/servlet-context.xml</param-value>
</init-param>
<init-param>
<param-name>dispatchOptionsRequest</param-name>
<param-value>true</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
设置完成后再次上传图片,会发现在上传的第一次请求OPTIONS的header正确设置了跨域,并随后有了POST请求,上传成功!
spring mvc:ueditor跨域多图片上传失败解决方案的更多相关文章
- spring MVC cors跨域实现源码解析
# spring MVC cors跨域实现源码解析 > 名词解释:跨域资源共享(Cross-Origin Resource Sharing) 简单说就是只要协议.IP.http方法任意一个不同就 ...
- spring MVC cors跨域实现源码解析 CorsConfiguration UrlBasedCorsConfigurationSource
spring MVC cors跨域实现源码解析 spring MVC cors跨域实现源码解析 名词解释:跨域资源共享(Cross-Origin Resource Sharing) 简单说就是只要协议 ...
- wangEditor 图片上传失败提示
wangEditor 官网自定义上传事件:https://www.kancloud.cn/wangfupeng/wangeditor2/123689 声明:我用的wangEditor版本是2.1.23 ...
- 从web编辑器 UEditor 中单独提取图片上传,包含多图片单图片上传以及在线涂鸦功能
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...
- 关于editor网页编辑器ueditor.config.js 配置图片上传
最近公司项目在做一个门户网站,其中新闻和简介等部分使用到了ueditor编辑器,但是上级明确指示需要图片上传这个功能,这时却发现图片上传功能不能正常使用,上传时一直报错,网上收了好几个处理办法,都说的 ...
- ueditor使用canvas在图片上传前进行压缩
之前就看到H5使用canvas就可以在前端使用JS压缩图片,这次接到任务要把这个功能嵌入到ueditor里面去,以节省流量,减轻服务器压力. H5使用canvas进行压缩的代码有很多,核心原理就是创建 ...
- ueditor 百度编辑器 自定义图片上传路径和格式化上传文件名
今天项目中需要自定义图片上传的保存路径,并且不需要按照日期自动创建存储文件夹和文件名,我的ueditor版本是1.3.6.下面记录一下我配置成功的方法,如果有什么不对的地方欢迎指出,共同学习: 1:我 ...
- 百度ueditor vue项目应用 -- 图片上传源码修改
本文目的有两个,一.废掉单图上传,二.改造多图上传 大家都知道百度ueditor不是针对vue项目开发的,官方文档提供的源码包里有需要后端配置的接口,but到vue项目就不太好办了,网上有些文章也介绍 ...
- spring mvc + xmlHttpRequest2.0 实现无刷新上传文件,带进度条和剩余时间
1.springmvc支持文件上传,需要在spring-mvc.xml配置文件中加上下面的一段话: <!-- 支持上传文件 --> <bean id="multipartR ...
随机推荐
- 种下一棵树:有旋Treap
第一个平衡树板子,有旋Treap.用随机函数规定一个堆,维护点权的同时维护堆的性质,可以有效地避免退化成链.按我的理解,建立一棵二叉排序树,树的形态会和给出节点的顺序有关.按照出题人很机智定理,数据肯 ...
- golang 之验证码api
知识一:如何返回一个json数据? 先定义一个结构体ResponseData,2个参数,并返回的是json数据,key就是json后定义的名称 type ResponseData struct { S ...
- Unity 特殊文件夹 Assets Resources StreamingAssets Editor Plugins......
AssetsAssets文件夹是unity项目中放置游戏资源的主文件夹. 该文件夹中的内容将直接反应在编辑器的Project视口中.许多系统API基于该文件夹路径. ResourcesUnity允许你 ...
- java网络编程实现两端聊天
网络编程的三要素: ip地址:唯一标识网络上的每一台计算机 端口号:计算机中应用的标号(代表一个应用程序),0-1024系统使用或者保留端口,有效端口0-65535(short) 通信协议:通信的规则 ...
- Java获取指定时间的毫秒值的方法
有以下两种方法获取指定时间的毫秒值: 1.Calendar类 先由getInstance获取Calendar对象,然后用clear方法将时间重置为(1970.1.1 00:00:00),接下来用set ...
- Python 装饰器总结
装饰器总结 前提 使用装饰器的前提在于Python提供的特性: 函数即对象,可以进行传递: 函数可以被定义在另外一个函数中: 可以通过一个例子来了解: def get_animal(name='dog ...
- HTML indexedDB数据库—简单示例
indexedDB数据库的基本概念:在HTML5中,新增一种被称为"indexedDB"的数据库,该数据库是一种存储在客户端本地的NoSQL数据库. <!DOCTYPE ht ...
- JAVASCRIPT 调用 其他应用程序的方法
在上一篇中就已经提供了一种方法,就是通过自己写OCX 给OCX 传入路径,通过OCX 启动应用程序.当然这种方法可扩展性很多,不一定是启动应用程序了.今天提供另一种比较简单的可以启动应用程序的方法,不 ...
- android学习ViewFlipper的使用
android系统自带的多页面管理控件,它可以实现子页面的自动切换 1,为ViewFlipper添加View 静态导入:在layout布局文件中直接导入 动态导入:通过addview方法进行导入 2, ...
- QtWebKit/QtWebEngine移植差异(网摘)
QtWebKit/QtWebEngine移植差异 原文出处:[wiki.qt.io] This guide gives an overview of the differences between t ...