Axios调用FastAPI的OAuth2登录接口如何正确传参获取token

问题根因 #

FastAPI的OAuth2PasswordRequestForm依赖默认仅接收application/x-www-form-urlencoded格式的表单参数，你当前代码直接给axios传JS对象，默认会以application/json格式发送请求，后端无法解析到对应的username、password字段，因此会报错。另外你前端解构响应的字段名和后端返回的不匹配，也会导致拿不到token。

修复方法 #

方法1：使用URLSearchParams构造表单参数（无需额外依赖） #

直接用浏览器原生的URLSearchParams包装参数，axios会自动识别并设置正确的请求头：

methods: {
  login() {
    const username = this.username, password = this.password;
    // 构造表单参数
    const formData = new URLSearchParams()
    formData.append('username', username)
    formData.append('password', password)

    axios.post(process.env.VUE_APP_LOGIN, formData)
    .then(response => {
      // 后端返回的字段是access_token，不是token
      const {access_token, token_type} = response.data;
      console.log(access_token, token_type)
      this.$store.commit('auth/SET_TOKEN', access_token)
    })
  }
}

方法2：使用qs库序列化参数（适合参数较多的场景） #

如果项目已经安装了qs库，可以直接序列化JS对象：

import qs from 'qs'

// 省略其他代码
axios.post(process.env.VUE_APP_LOGIN, qs.stringify({
  username: username,
  password: password
}))

额外注意 #

• 如果后端接口要求传scope等其他OAuth2标准参数，直接按上述方法添加参数即可
• 不需要手动修改请求头的Content-Type，axios检测到参数是URLSearchParams或者qs序列化后的字符串会自动设置为application/x-www-form-urlencoded

内容的提问来源于stack exchange，提问作者Lykas