Http请求头的Content-Type的几种格式和对应的后端参数获取

今天在前后端联调开发过程中，出现了一个后端通过request.getParameterMap()方法获取不到请求参数的问题，所以在此做一个记录，并提出解决方案。

首先，出现问题是因为数据格式为Request Payload，是在react使用axios进行ajax请求的时候出现的，原来，axios中默认请求头的编码为application/json;charset=UTF-8,即Content-Type = "application/json;charset=UTF-8",这个时候可以通过数据流的读取进行参数解析，经测试，方法为通用方法，对于ajax请求适用，代码如下
 

//将请求参数类型为request payload格式的请求参数封装成一个Map
    //该方法为通用方法
    public static Map<String,String> requestPayload2Map(HttpServletRequest request){
        Map<String,String> reqParams = new HashMap<>();
        StringBuilder sb = new StringBuilder();
        //从请求流中读取数据
        try( BufferedReader reader = request.getReader();)
        {
            char[] buffer = new char[1024];
            int len = 0;
            while((len = reader.read(buffer))!=-1){
                sb.append(buffer,0,len);
            }
        } catch (IOException e) {
            e.printStackTrace();
        }

        System.out.println("数据为："+sb.toString());
        JSONObject object = JSONObject.fromObject(sb.toString());
        for (Object key :object.keySet()) {
            reqParams.put((String)key,(String)object.get(key));
        }
        return reqParams;
    }

但是，再后来，通过如下编码对Content-Type进行设置
 

        axios({
            url:url,
            data:{
                userName:username,
                password:password
            },
            method:'post',
            headers:{'Content-Type':'application/x-www-form-urlencoded'}
        })
            .then(response=>{
                const result = response.data
                console.log(result)
            }).catch(error=>{
            console.log(error)
        })

 

这里，我们修改了Content-Type的值，application/x-www-form-urlencoded是窗体数据被编码为名称/值对。这是标准的编码格式我们就有一个疑问，为什么我们的那个方法依然失效呢,经过多种方式测试，发现，我们要使用的方法如果在后台的得到的数据格式为XX1=XXX1&XX2=XXX2，那么我们就可以使用成功了，即通过表单的action方式

当使用表单的action提交的时候，如果设置了属性encType = "multipart/form-data",那么后台获取到的数据格式为：
 

数据为：------WebKitFormBoundaryN4vBMLIkQoIBjLqe
Content-Disposition: form-data; name="usename"

liming
------WebKitFormBoundaryN4vBMLIkQoIBjLqe
Content-Disposition: form-data; name="password"

123456
------WebKitFormBoundaryN4vBMLIkQoIBjLqe--

此时的Content-Type为Content-Type:    multipart/form-data; boundary=----WebKitFormBoundaryN4vBMLIkQoIBjLqe，所以建议在使用ajax的时候，最好使用通用方法进行参数获取，以便少走弯路。。。