Vue中使用axios调用后端接口的坑
作者:互联网
问题场景:Vue.js工程中使用axios调用后端接口(SpringBoot构建)出现后端接口无法获得数据的情况,因此总结了如下场景:
@RequestParam
用来处理application/x-www-form-urlencoded
编码(HTTP协议请求头中不指定Content-Type
默认就是application/x-www-form-urlencoded
)。@RequestParam
可以接受简单类型的属性,也可以接受对象类型的属性,实质就是将Request.getParameter()
中的键值对Map利用Spring的转化机制ConversionService配置,转化成参数接受对象或者字段。@RequestParam
在GET请求中是QueryString的形式,POST请求BodyData的值都会被Servlet接受并转化为Request.getParameter()
参数集中。@RequestParam
在POST请求指定Content-Type
为application/json;charset=UTF-8
时会出现400错误。@RequestParam
不能使用@RequestParam JSONObject params
接受参数,否则会出现500错误。@RequestParam
前端不能使用JSON.stringify()
格式化参数,可以使用axios中的QS代替:QS.stringify()
。@RequestBody
用来处理HTTPEntity(HTTP实体,HttpEntity实体即可以使流也可以使字符串形式)传递过来的数据,一般用于处理非application/x-www-form-urlencoded
编码。
GET请求没有HTTPEntity所以@RequestBody
并不适用,否则参数会乱码导致400错误。- 在POST请求中使用
@RequestBody
时,通过HTTPEntity传递参数,必须要在HTTP请求头设置Content-Type
为application/json;chatset=UTF-8
,否则会出现415错误,SpringMVC通过使用HandlerAdapter配置HTTPMessageConverter来解析HTTPEntity中的数据,然后绑定到Bean上。 - 在POST请求使用
@RequestBody
时,前端必须使用JSON.stringify()
格式化为JSON字符串数据。
注解 | 支持类型 | 支持的请求类型 | 支持的Content-Type请求头类型 |
---|---|---|---|
@PathVariable | URL | GET | ALL |
@RequestParam | URL | GET | ALL |
@RequestParam | Body | ALL | application/form-data, application/x-form-www-urlencoded |
@RequestBody | Body | ALL | aplication/json |
标签:axios,请求,RequestParam,接口,RequestBody,application,Vue,form,HTTPEntity 来源: https://blog.51cto.com/xvjunjie/2538787