使用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");
}
对文章有疑问或者想获取更多技术文章,欢迎关注微信公众号:程序猿洞穴
假想网 - 未来,属于会做梦的人。