526互联

Vue 登录login post请求 security UserDetailsService 获取参数为""

发布时间 2023-04-18 17:33:18作者: 黒马

背景

原请求将数据放到params中，导致数据拼接在请求地址后面，具有高级安全隐患。

请求方法:
axios.request({
  url: '/login',
  method: 'post',
  params: {
    username: '****',
    password: '****'
  }
})

出现的问题

  1. 将params改成data，使数据放在请求体中，但后端自定义的UserDetailsService获取到的username为""，导致登录失败。
  2. 用postman发送改请求，登录成功。
  3. 取postman看到的请求头'Content-Type': 'application/x-www-form-urlencoded', 在请求中添加headers中并添加该参数，但后端还是同样问题。

解决方法

通过postman右边的</>按钮，选择nodeJS - Axios，发现需要引入qs对参数进行stringify，最终调整如下：

import qs from 'qs'
axios.request({
  url: '/login',
  method: 'post',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  data: qs.stringify({
    username: '****',
    password: '****'
  })
})