前后端分离中axios的post请求问题

axios中post请求问题

描述 在axios的post请求中传参时java后端无法获取值

例如前端如下

form 是一个对象 里面保存有登录名、密码、用户类别

form: {
     
        username: '123',
        password: '123',
        type: '1'
      }

const {
      data: res } = await this.$http.post('login', this.form)
if (res.code !== 200) return this.$message.error(res.msg)
this.$message.success(res.msg)

后端如下

@PostMapping("login")
public String login(String username,
                    String password,
                    String type) {
     
}

此时前端发送请求时 post请求可以到达后端 但是参数无法获取

因为axios请求头中默认 content-type 为 application/json

后端使用spring mvc的话 不能直接通过参数名获取前端传过来的参数

但是可以使用 @RequestBody Map params的方式获取传入参数

不过如果使用@RequestBody Map params这样获取参数，将会得到一个map集合，需要用key取值，就不是很方便

解决办法

1. 后端解决

第一种 情况 如果前端传过来的值 后端有对应的bean

意思就是前端数据对象，在后端刚好有一个一样的

    class form{
     
        String username;
        String password;
        String type;
    }

就可以可以直接@RequestBody Bean bean取值

另一种 没有对应bean

则可以通过@RequestBody Map params 获取到全部的入参

这时候入参是map集合 取值不便

2. 前端解决

引入qs库 并配置到vue原型

import qs from 'qs'
Vue.prototype.$qs = qs

在post请求的地方使用qs

form: {
     
        username: '123',
        password: '123',
        type: '1'
      }

const {
      data: res } = await this.$http.post('login', this.$qs.stringify(this.form))
if (res.code !== 200) return this.$message.error(res.msg)
this.$message.success(res.msg)