axios发送post请求java后端获取不到数据原因及处理 - 好文

场景/功能描述：

最近再学习前端的框架vue,发请求使用的是axios，自己简单的写了个后端，实现一个学生列表的crud，web层使用的是springmvc,并使用jq的$.ajax方式测试过接口没问题。

出现的问题：
   已经再次确保后端接口能接收jquery的$.ajax发送的post请求，但前端使用vue,发请求通过axios来发送，后端却无法获取数据。

问题原因：
   请求的Content-Type设置为application/x-www-form-urlencoded,那么这个Post请求被认为是HTTP
POST表单请求,参数出现在form data,参数形式是key=value&key1=value1这种形式，后端获取使用@RequestParam;
其他情况如使用原生AJAX的POST请求如果不指定请求头Request
Header,默认使用的Content-Type是text/plain;charset=UTF-8,或者application/json
,参数出现在Request payload块,其参数形式是标准的json格式，使用@RequestParam无法获取,需要使用@RequestBody获取。
   在axios使用Post发送数据时，默认是直接把json放到请求体中提交到后端的，属于上述的第二种方式。

解决方案：
第一种、前端解决：添加请求头信息,并重新封装请求参数
let params = 'studentno=' + this.student.studentno +
'&name=' + this.student.name +
'&phone=' + this.student.phone +
'&email=' + this.student.email
axios.post(url, params,{headers: {'Content-Type':
'application/x-www-form-urlencoded'}})

看到这种拼接字符就觉得恶心，可以选择另外的方式：

参考文档链接：
https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format
<https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format>

一下是拷贝关于参考文档中给出的方案，需要详细了解可翻阅文档。

Using application/x-www-form-urlencoded format

By default, axios serializes JavaScript objects to JSON. To send data in the
application/x-www-form-urlencoded format instead, you can use one of the
following options.

Browser

In a browser, you can use the URLSearchParams
<https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams> API as
follows:
const params = new URLSearchParams(); params.append('param1', 'value1');
params.append('param2', 'value2'); axios.post('/foo', params);
Note that URLSearchParams is not supported by all browsers (see caniuse.com
<http://www.caniuse.com/#feat=urlsearchparams>), but there is a polyfill
<https://github.com/WebReflection/url-search-params> available (make sure to
polyfill the global environment).

Alternatively, you can encode data using the qs <https://github.com/ljharb/qs>
library:
const qs = require('qs'); axios.post('/foo', qs.stringify({ 'bar': 123 }));
Or in another way (ES6),
import qs from 'qs'; const data = { 'bar': 123 }; const options = { method:
'POST', headers: { 'content-type': 'application/x-www-form-urlencoded' }, data:
qs.stringify(data), url, }; axios(options);

第二种、后端解决：在请求参数使用@RequestBody注解替代@RequestParam
@ResponseBody
@RequestMapping(value="/save",method=RequestMethod.POST)
public Map<String, String> save(@RequestBody Student
student)//自动将参数封装成student对象

代码不详细列出，仅列出关键部分。

热门工具换一换