Axios POST请求后端无法接收参数

Axios的POST请求在发送数据之后SpringBoot项目接口无法获取前端传递的数据

无法请求的示例

前台

在vue里面封装请求使用

//挂载
import axios from 'axios'
Vue.prototype.$http =axios;

//$http是axios挂载后的
let ret=await this.$http.post('http://127.0.0.1:8090/login',{
  username: 'admin',
  password:'admin',
});

单独不封装请求

function dj() {
  axios
    .post(
      "http://127.0.0.1:8090/login",
      {
        username: "XYH0922",
        password: "XYH0922",
      }
    )
    .then((response) => {
      console.log(response);
    });
}

后台

/**
 * 登入
 * @param username
 * @param password
 * @return
 */
@RequestMapping(path = "/login",method= RequestMethod.POST)
public JsonResult login(String username, String password){
    System.out.println(username+" "+password);
    return coser.login(username,password);
}

结果

上面这些方法都无法获取到前台传递的参数

表单请求后端

<form action="http://127.0.0.1:8090/login" method="POST">
      <input type="text" name="username" />
      <input type="password" name="password" />
      <input type="submit" value="提交" />
 </form>

同样可以提交

PostMan发送请求

解决

解决方法参考

安装

npm i qs

使用

this.ruleForm={
  username:'admin',
  password:'admin'
}

const qs = require('qs');
const options = {
    method: 'POST',
    headers: { 'content-type': 'application/x-www-form-urlencoded' },
    //发送的数据
    data: qs.stringify(this.ruleForm),
    //请求的数据
    url:'http://127.0.0.1:8090/login'
};
//axios请求
let ret=await this.$http(options);
console.log(ret);