axios.post请求踩过的坑

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请求。

以上就是我们本次踩到的坑和解决方法啦