axios使用form-data传参方式解决参数格式不正确问题

今天在和一个新后端对接口时，发现我的参数明明传了的，但是接口报错 参数格式不正确。然后立马怀疑是传参方式有问题。

首先axios 默认是 Payload格式数据请求如下

请求头  Content-Type: 'application/json; charset=utf-8'

相对应我们请求的时候是传了一个对象

但现在后端接收参数要求必须是 Form Data 格式的，所以我们就得进行转换。

Form Data　　 Content-Type: 'application/x-www-form-urlencoded'

 qs 模块是安装 axios 模块的时候就有的，不用另行安装

//利用拦截器进行全局配置：
import axios from 'axios'
import { Message } from 'element-ui'
import qs from 'qs'

axios.defaults.timeout = 5000 // 超时终止请求
axios.defaults.baseURL = process.env.VUE_APP_API_URL // 配置请求地址
// 设置请求拦截器
axios.interceptors.request.use(config => {

  config.data = qs.stringify(config.data)
  config.headers = {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
  return config
},
error => {
  return Promise.reject(err)
}
)

这样后端就成功接收到我的请求数据了。

代码修改前与修改后

post请求我没有进行改动

//url是字符串 如"http://aa.com"
//merged 是对象如 {a:12,b:22}

axios.post(url, merged).then((res) => {
              resolve(res.data)
        }).catch((err) => {
          reject(err.data)
        })