element-ui+jfinal 跨域文件上传提示 Posted content type isn't multipart/form-data

先分享解决方案:

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

评论区

穿越123

2019-04-26 17:10

vue前端配置使用代理服务器,一两行代码搞定

小船翻翻

2019-04-26 18:41

@穿越123 是的,但是我不太懂,一度以为el-upload不好用

JFinal

2019-04-26 19:40

有不少人碰到过这个问题,谢谢分享

j1066783215

2019-04-27 10:08

我是在handler判断option请求转发处理

zz210891470

2019-06-20 09:32

@j1066783215 请问您在handler 里面也是这样写吗?
if (allowedOrigins.contains(originHeader)){

response.setHeader("Access-Control-Allow-Origin", originHeader);
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS,DELETE,PUT");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers",

"Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With,Origin,Token,Accept, Connection, User-Agent, Cookie");
if("OPTIONS".equals(request.getMethod())){
response.setStatus(HttpServletResponse.SC_NO_CONTENT);
return;
}


}

j1066783215

2019-06-20 14:39

@zz210891470 我的handler只实现跳转URL 跨域通过拦截器实现

热门分享

扫码入社