axios发送post请求时后台不能直接获取到参数

前言

此文用于解决axios发送post请求时，Spring后台不能直接获取到参数的问题。

问题概述

用axios向后台发送带参post请求：

后台无法直接获取参数：

原因分析

通过axios源码可知，当参数为object时，axios做了两件事：

源码链接 https://github.com/axios/axios/blob/master/dist/axios.js

1. header 被设置成 application/json;charset=utf-8
2. 参数被 Json.stringify

此时问题已经很明确了，请求头为 application/json 时，后端收到并处理的应该是一个实体类 @RequestBody Body body，而不是单个字符串。此时需要联系后台改进。由于此方案容易引起撕逼，建议用下面的方法：

最佳方法

将 Content-Type 设置为 application/x-www-form-urlencoded

      this.$axios({
        method: 'post',
        url: '/user/login.do',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        data: {
          username: this.loginForm.username,
          password: this.loginForm.password
        }
      })
      .then(resp => {...})

而 application/x-www-form-urlencoded 需要将参数设置成query参数模式。（这里引入qs模块来处理成query参数）
整体思路是在入口函数中，通过axios拦截器拦截所有post请求，并qs.stringfy其参数。

// 拦截并stringify所有post参数
axios.interceptors.request.use((req) => {
  if (req.method === 'post') {
      req.data = qs.stringify(req.data)
  }
  return req
}, (error) => Promise.reject(error))

顺便说一下，由于参数已经提前stringify了，所以并不会走源码中object的判断将’Content-Type’改为’application/json’，而是使用默认的’application/x-www-form-urlencoded’。所以可以不用设置’Content-Type’