axios.post请求踩过的坑
今天做一个前后端分离项目 发现了一个问题 前端tag标签向后台传参的时候
发生了一些问题
前端代码如下:
后端代码如下:
我本以为当我前端发出一个数组对象时 后台只要加上RequestBody注解即可
可惜报错了
很明显的400报错
我们可以看的更详细一点
很明显可以看到我的tag标签已经被封装成了一个数组对象
后台也加了RequestBody注解 为什么会报400的错呢
原来 **axios默认发送数据时,数据格式是Request Payload,并非我们常用的Form Data格式,所以参数必须要以键值对形式传递,不能以json形式传参 **
可以看到 我们传参的Content-Type是 application/json的
那么 我就把它变成application/x-www-form-urlencoded这样一来
数组是不是就能传过去了呢
于是我引用了qs:qs详情
qs简单描述
qs是一个npm仓库所管理的包,可通过npm install qs命令进行安装.
qs.parse()将URL解析成对象的形式
qs.stringify()将对象 序列化成URL的形式,以&进行拼接
这样以来 就简单多了
修改后前端代码如下:
修改后后台代码如下:
大家可能会奇怪 为什么用requestParam
注意:我最开始后台代码
是用的 requestBody 但是他报错了 报的415
于是我去百度深造了一下 发现有一部分是没有requestBody报错 有的是因为有requestBody才报错 于是
我把 requestBody 去掉 发现结果运行成功 我又加上requestParam
依旧成功 那么这是为什么呢?
原来和post传参的Content-Type有关
Content-Type 的值类型:
application/json:消息主体是序列化后的 JSON 字符串
application/x-www-form-urlencoded:数据被编码为名称/值对。这是标准的编码格式
multipart/form-data: 需要在表单中进行文件上传时,就需要使用该格式。常见的媒体格式是上传文件之时使用的
text/plain:数据以纯文本形式(text/json/xml/html)进行编码,其中不含任何控件或格式字符
那我们第一次传参失败
就是用的 application/json 他会告诉服务器请求的主题内容是json格式的字符串,服务器端会对json字符串进行解析,
因为vue中axios后台接收的传递参数是key
value的格式,但是使用axion传递的参数却是json格式的数据,所以一直请求失败
于是我们用qs 将Content-Type换为了 application/x-www-form-urlencoded
application/x-www-form-urlencoded
在请求发送过程中会对数据进行序列化处理,以键值对形式
?key1=value1&key2=value2 的方式发送到服务器 这样就可以理解为什么能加requestParam了
application/x-www-form-urlencoded:信息数据被编码为名称/值对,这是标准且默认的编码格式
还有一个最最好用的 就是所有的浏览器都支持这种格式
那么接下来就是application/x-www-form-urlencoded在post和get请求时 有什么区别呢?
当action为get时候,客户端把form数据转换成一个字串append到url后面,用’?'分割。
当action为post时候,浏览器把form数据封装到http
body中,然后发送到server。(可以取消post请求的预检请求)
注意
在使用axios时,还要注意到配置选项中包含params和data两者
因为params是添加到url的请求字符串中的,用于get请求。
而data是添加到请求体(body)中的, 用于post请求。
以上就是我们本次踩到的坑和解决方法啦