先分享解决方案:
public void uploadImg() { UploadFile file = null; if (!getRequest().getMethod().equals("OPTIONS"))//先判断请求非options file = getFile("file");//不是options请求在getFile() }
以下都是废话:
这两天做一个视频网站项目,前端使用的是vue+element-ui,后端用的是jfinal。因为前端项目是运行在webpack-dev-server上面的,所以呢前后端就分离了,于是乎有了跨域的问题。跨域问题的解决我是参考两位大佬的分享出来的解决方案的。下面是链接:
http://www.jfinal.com/share/1024
http://www.jfinal.com/share/260
因为我不是maven项目,所以我就用了 share/1024的方案。复制粘贴很容易就搞定了跨域问题。但是到了文件上传,跨域问题又来了。折腾这个问题大概花了两天左右的时间。
查阅各种资料,解决问题的矛头大多都指向了前端。要么设置请求头,要么设置代理,要么重写文件上传方式。搞了一天多,我也开始怀疑elementUI的el-upload是否有bug,是否跟jfinal冲突。查阅大量资料,答案是否定的。自己用原生组件测了测,还是原来的错误原来的味道。那么问题终于确定了,至此至终都是跨域的问题。
因为我用的是CORS跨域,浏览器会事先发送一个options请求,来确定服务器是否同意跨域,同意跨域就发送你自己的请求。恰巧,jfinal上传文件需要先调用getFile()。于是options请求碰到getFile(),options不是文件上传请求,所以getFile()直接抛出去异常,下逐客令。options跨域请求头没拿到,吃了闭门羹。自然而然文件上传也就失败了。所以解决方案就是过滤一下options请求。
关于CORS可以参考:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS