zoukankan      html  css  js  c++  java
  • spring mvc:ueditor跨域多图片上传失败解决方案

    公司在开发一个后台系统时需要使用百度的UEditor富文本编辑器,应用的场景如下:

    1. UEditor的所有图片、js等静态资源在一个专有的静态服务器上;
    2. 图片上传在另外一台服务器上;

    因为公司内部会使用chrome来进行后台管理,因此在跨域解决方案上,选择了设置h5中的Access-Control-Allow-Origin header。

    但在开发测试时,发现在上传多图片时,浏览器确实向指定的后端发送了上传的请求,但UEditor却一直报上传失败的错误,因为是第一次做这种跨域的项目,因此有些想不通,在仔细查看请求后发现,浏览器发送的这个上传请求的请求方式不是常见的get、post方式,而是OPTIONS.

    OPTIONS请求有什么作用?百度后精简的两句话介绍其作用:

    1. 获取服务器支持的HTTP请求方法;也是黑客经常使用的方法。
    2. 用来检查服务器的性能。例如: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文件中加入如下初始化参数:

     1 <servlet>
     2      <servlet-name>ModelViewController</servlet-name>
     3      <servlet-class>org.springframework.web.servlet.DispatcherServlet
     4      </servlet-class>
     5      <init-param>
     6      <param-name>contextConfigLocation</param-name>
     7      <param-value>classpath:/spring/servlet-context.xml</param-value>
     8      </init-param>
     9      <init-param>
    10      <param-name>dispatchOptionsRequest</param-name>
    11     <param-value>true</param-value>
    12     </init-param>
    13 <load-on-startup>1</load-on-startup>
    14 </servlet>

    设置完成后再次上传图片,会发现在上传的第一次请求OPTIONS的header正确设置了跨域,并随后有了POST请求,上传成功!

  • 相关阅读:
    Activity具体解释(生命周期、以各种方式启动Activity、状态保存,全然退出等)
    StringBuffer和StringBuilder使用方法比較
    python 多线程编程
    八大排序算法总结
    腾讯面试
    顶尖的个人作品集站点设计赞赏
    MATLAB新手教程
    ThreadPoolExecutor使用介绍
    linux diff具体解释
    Android借助Application重写App的Crash(简易版)
  • 原文地址:https://www.cnblogs.com/liaochong/p/springmvcueditor.html
Copyright © 2011-2022 走看看