Jquery ajax 通过nginx转发接口时受processData和contentType影响后端接收不到数据怎么搞

最近需要写一个前后端分离的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中一旦配置了processDatacontentType这两个配置后端就接收不到参数了。现在问题就很尴尬我的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对象封装能力就行。

可以放一点前端代码看看吗

不知道你这个问题是否已经解决, 如果还没有解决的话:

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^