浅聊一下接口注解与前端发送请求时Headers中的Content-Type关系

107 阅读2分钟

背景

做一个简单的登录功能,前端React+vite,后端是SpringBoot,写了一个登录接口,在参数获取上遇到了麻烦。

如图:

image.png 这是一个登录接口,里面没有任何逻辑,只是接收了username和password两个参数,后面会准备用这两个参数查询数据库,判断是否存在登录信息,但是,在获取参数时就遇到了难题。 前端代码:

image.png 这是一个表单提交逻辑,用的是AntdDesignReact的form表单提交,结果发现,后端根本没有获取到username和password,如图:

参数:

image.png

后端接收:

image.png

思考

查看请求的参数,我发现是一个对象形式

 {username: "111", password: "222"}
 

而后端接收,直接是用的username和password,首先两边的参数数据结构就不一致,难怪接收不到,要想接收到参数,就应该弄明白后端接口定义的接收方式与前端传递参数的方式是否匹配!

解决

关键点是是在前端的Headers中的Content-Type属性值,我是二次封装了axios来发送请求,并没有设置Headers,axios默认的Content-Type是application/json,如图:

image.png

这种方式声明了请求体中的数据将会以json字符串的形式发送到后端,也就是后端拿到的应该是一个字符串,而不是解构后的key value键值对,要想拿到key-value键值对结构,需要将Content-Type设置为: application/x-www-form-urlencoded,如图:

image.png

再次发送请求:

image.png 果然参数结构和之前不一样,再看后端:

image.png

也成功获取到了参数值。

那么如果Contetn-Type就用默认的application/json,后端该如何获取参数呢,其实也是需要一个注解就可以搞定 @RequestBody,如图:

image.png

我们把Content-Type删除,再次发送请求:

image.png

image.png

这样后端接口也可以获取到参数了!

总结

Axios请求头中Content-Type常见的三种格式:

1、Content-Type: application/json

如果没有特别声明,appiationl/json是Asios默认的Content-ype,它声明了请求体中的数据将会以json字符串的形式发送到后端。所以,在请求的时候,需要将传给后台的数据JSON序列化即可。

2、Content-Type: application/x-www-form-urlencoded

声明了请求体中的数据会以键值对(普通表单形式)发送到后端,这种类型是Ajax默认的。

3、Content-Type: multipart/form-data

则一般用来上传文件,指定传输数据为二进制数据,也可以是键值对的形式