最近需要写一个前后端分离的demo,但由于本人不是前端开发,所以在写测试页面的时候遇到一个问题想请教一下。
首先整个请求的流程是前端通过nginx转发请求到后端,nginx配置如下
location /api {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
if ($request_method = 'OPTIONS') {
return 204;
}
proxy_pass http://localhost:96;
}
但是在一开始前端的测试页面用ajax发请求后端接不到参数!一步步的排查,最终发现是ajax中一旦配置了processData
和contentType
这两个配置后端就接收不到参数了。现在问题就很尴尬我的ajax中有文件需要processData=false
,有没有前端的大V指点一下。
traditional: true 这个参数已经试过无法解决问题。
这个问题已经解决,特此记录一下。
首先ajax请求里面任然使用processData: false,contentType: false
即可,因为查了相关资料,首先contentType的默认值是application/x-www-form-urlencoded; charset=UTF-8 ,这个方式不能用来提交文件。当提交文件的时候contentType需要设置成multipart/form-data
,但是在实际使用的时候如果你的contentType是multipart/form-data
,并且包裹文件的对象是FormData,提交请求以后前段会报415错误,后台的servlet会提示你如下异常
Content type ‘multipart/form-data;boundary=----WebKitFormBoundaryTz0sivpVO7U0H70m;charset=UTF-8‘
之后就是后端,在后端接受请求参数的时候用了 @RequestBody
接收来自前端的一个json对象数据,这个数据里包含了除了文件的其他内容,但是报了如下错误
java:the request was rejected because no multipart boundary was found
最后查询资料,发现当你上传文件的时候,后台不能接收Json对象,就是说上传
和@RequestBody
是不能共存的。
所以总结来讲这个问题有两种解决方案,第一种是后端麻烦点,将上传和处理其他数据的Controller分开写,第二种就是前段麻烦一点,将原本用json对象格式传递的数据写成单个的key-value格式,后台接收任然保持用一个对象去接收,但不要用@RequestBody
注解了,依靠框架的非Json对象封装能力就行。
可以放一点前端代码看看吗
不知道你这个问题是否已经解决, 如果还没有解决的话: