使用WebUploader跨域上传图片，用SpringMVC实现服务器端

使用WebUploader实现跨域上传图片，当点击上传时，客户端会向服务器端先后发送两次请求，第一次是OPTIONS请求，用来验证服务器端是否允许跨域上传，当服务器允许跨域并正常返回时，WebUploader才会去发送第二次请求，也就是真正的图片上传的POST请求。

如果使用原生的Servlet来处理请求，直接重写OPTIONS方法和POST方法即可，但是SpringMVC默认禁用了OPTIONS请求，需要在初始化SpringMVC的核心控制器DispatcherServlet时指定初始化参数，来开启OPTIONS请求。

【配置如下】

<!-- 开启 SpringMVC对OPTIONS请求的支持-->
<init-param>
   <param-name>dispatchOptionsRequest</param-name>
   <param-value>true</param-value>
</init-param>

然后后台Controller可以这么写

//处理第一次OPTIONS验证请求
@RequestMapping(value="/webUploader", method = RequestMethod.OPTIONS)
public void webUploader(HttpServletRequest request, HttpServletResponse response) throws IOException {
    response.setHeader("Access-Control-Allow-Credentials", "false");
    response.setHeader("Access-Control-Allow-Origin", "*"); //生产环境绝对不允许设置为“*”
    response.setHeader("Access-Control-Allow-Methods", "*");
    response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");
    response.setContentType("application/json");
    response.setCharacterEncoding("utf-8");
}

//处理第二次POST上传请求
@RequestMapping(value="/webUploader", method = RequestMethod.POST)
@ResponseBody
public String webUploaderFile(HttpServletRequest request, HttpServletResponse response, MultipartFile file) throws IOException {
    response.setHeader("Access-Control-Allow-Origin", "*"); //生产环境绝对不允许设置为“*”
    response.setHeader("Access-Control-Allow-Methods", "*");
    response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");
    response.setContentType("application/json");
    response.setCharacterEncoding("utf-8");
    //图片上传逻辑，返回图片存放链接
    return uploadUtils.upload(file, "picture", "user");
}

对文章有疑问或者想获取更多技术文章，欢迎关注微信公众号：程序猿洞穴

假想网 - 未来，属于会做梦的人。