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 ...
随机推荐
- Python初识(PyMysql实例)
为什么学习python呢,好吧,其实我也不知道,反正就是想学习了. 资料什么的全都low了,传值博客免费的就够.不要问我为什么,我基本上都是找的免费的视频.然后传值博客的最多,我真的不是打广告. py ...
- SpringBoot上传任意文件功能的实现
一.pom文件依赖的添加 <dependencies> <dependency> <groupId>org.springframework.boot</gro ...
- 23. leetcode 169. Majority Element
169. Majority Element Given an array of size n, find the majority element. The majority element is t ...
- overlay 是如何隔离的?- 每天5分钟玩转 Docker 容器技术(53)
不同的 overlay 网络是相互隔离的.我们创建第二个 overlay 网络 ov_net2 并运行容器 bbox3. bbox3 分配到的 IP 是 10.0.1.2,尝试 ping bbox1( ...
- JSR-303 Bean Validation 介绍及 Spring MVC 服务端参数验证最佳实践
任何时候,当要处理一个应用程序的业务逻辑,数据校验是你必须要考虑和面对的事情. 应用程序必须通过某种手段来确保输入参数在上下文来说是正确的. 分层的应用很多时候同样的数据验证逻辑会出现在不同的层,这样 ...
- 脱壳练习之bitarts 5.0
运行界面 一开始不是PUSHAD,这里我们跟到PUSHAD指令处,按F7执行该指令,接着在寄存器窗口中定位到ESP寄存器的值,在其上面单击鼠标右键选择-Follow in Dump. 仅允许非商业转载 ...
- C#使用Xamarin开发可移植移动应用(3.Xamarin.Views控件)附源码
前言 系列目录 C#使用Xamarin开发可移植移动应用目录 源码地址:https://github.com/l2999019/DemoApp 可以Star一下,随意 - - 说点什么.. .NET ...
- <未来世界的幸存者> 读后感(现实篇和职业篇)
摘要: 前几天有幸看到阮老师的 <未来世界的幸存者)>,花了几晚的时间阅读完毕,内心受到了很大的触动,现在将感觉不错的地方记录下. 职业篇 1. 为什么雇佣制度对工人不利? 雇佣制度是一种 ...
- python时间序列分析
题记:毕业一年多天天coding,好久没写paper了.在这动荡的日子里,也希望写点东西让自己静一静.恰好前段时间用python做了一点时间序列方面的东西,有一丁点心得体会想和大家 ...
- 01-artDialog4.1.7常用整理
关闭弹出框的几种常见方法: 1,artDialog可以通过鼠标双击关闭对话框,esc关闭对话框等.为了在关闭对话框要执行某一方法,不能仅仅在弹框中的关闭按钮中写.这时提供了一个函数:close.无论在 ...