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

Question

最近需要写一个前后端分离的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 这个参数已经试过无法解决问题。

Answer 1

这个问题已经解决，特此记录一下。

首先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对象封装能力就行。