axios发送post请求java后端获取不到数据原因及处理
场景/功能描述: 最近再学习前端的框架vue,发请求使用的是axios,自己简单的写了个后端,实现一个学生列表的crud,web层使用的是springmvc,并使用jq的$.ajax方式测试过接口没问题。出现的问题: 已经再次确保后端接口能接收jquery的$.ajax发送的post请求,但前端使用vue,发请求通过axios来发送,后端却无法获取数据。问题原因: ...
场景/功能描述:
最近再学习前端的框架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
一下是拷贝关于参考文档中给出的方案,需要详细了解可翻阅文档。
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
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), but there is a polyfill available (make sure to polyfill the global environment).
Alternatively, you can encode data using the 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对象
代码不详细列出,仅列出关键部分。
更多推荐
所有评论(0)