后端接收不到 axios 通过 post 方式传递的参数

[FishPlusOrange]

前一段时间，在参与一个 Vue 新项目时，选择 axios 作为前端 HTTP 库。在使用 axios 过程中发现，通过 post 方式传递的参数后端接收不到：

import Vue from 'vue'
import axios form 'axios'

Vue.prototype.$axios = axios

this.$axios.post('/api', {
    username: 'FishPlusOrange',
    password: '123456'
})
    .then(response => {
        // ...
    })

先说我最终采用的解决方案：在发送 post 请求之前，使用 qs 的 stringify 方法对请求参数进行处理，该问题得以解决：

import Vue from 'vue'
import axios form 'axios'
import qs from 'qs'

Vue.prototype.$axios = axios
Vue.prototype.$qs = qs

this.$axios.post('/api', this.$qs.stringify({
    username: 'FishPlusOrange',
    password: '123456'
}))
    .then(response => {
        // ...
    })

其中，axios 自带 qs 库，无需额外安装。

之所以选择这种解决方案，因为其只需要前端做相应调整，相对来说改动不大。

那么为什么会出现这样的问题呢？

查看 Network 发现前端发起的请求正文并不是熟悉的 Form Data，而是 Request Payload，Request Headers 中 Content-Type 也不是 application/x-www-form-urlencoded，而是 application/json：

// Request Payload
Content-Type: application/json;charset=UTF-8
{username: 'FishPlusOrange', password: 123456}

// Form Data
Content-Type: application/x-www-form-urlencoded;charset=UTF-8
username=FishPlusOrange&password=123456

查看 axios 代码发现 axios 对相关类型的请求做了处理：

以上基于 axios v0.18.0

可以看出经过 axios 处理之后，通过 post 方式传给后端的是一个 JSON 数据。

经过询问发现，后端默认使用 @RequestParam 注解，只能解析类似于 username=FishPlusOrange&password=123456 这样的字符串，自然就解析不到前端所传递的 Request Payload 参数了。

所以，还有一种解决方案可以从后端入手，使用 @RequestBody 注解。

以上就是我在使用 axios 的 post 方法过程中遇到的一个问题以及采取的解决方案，可能有不当的地方，希望可以帮忙指出。

[taowuhua]

解决了我的问题，感谢

[FishPlusOrange]

解决了我的问题，感谢

互相学习 :grin:

[kalfbz]

是否可以通过axios全局设置来解决这个问题，而不用每次通过this.$qs挂载原型的方式呢？

[FishPlusOrange]

是否可以通过axios全局设置来解决这个问题，而不用每次通过this.$qs挂载原型的方式呢？

可以对 axios 再做一层封装，对通过 post 方式传递的参数进行全局处理。

其实，一般项目中使用 axios 也会再做一层封装，可以对一些常用 api 进行封装，比如 get、post、put、delete 方法，使之更加易用；也可以配一些全局配置，比如 headers 相关配置；还可以对一些错误进行全局处理，比如请求超时、网络错误、登录过期等。