axios 使用data方式传递参数，后端接受不到

Question

在axios文档中：

// Send a POST request
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

这样后端就没法接收了

如果把data换成params，

Answer 1

查阅了资料https://segmentfault.com/p/12...，发现需要后端改接收方式

服务器为什么会对表单提交和文件上传做特殊处理，因为表单提交数据是名值对的方式，且Content-Type为application/x-www-form-urlencoded，而文件上传服务器需要特殊处理，普通的post请求（Content-Type不是application/x-www-form-urlencoded）数据格式不固定，不一定是名值对的方式，所以服务器无法知道具体的处理方式，所以只能通过获取原始数据流的方式来进行解析。jquery在执行post请求时，会设置Content-Type为application/x-www-form-urlencoded，所以服务器能够正确解析，而使用原生ajax请求时，如果不显示的设置Content-Type，那么默认是text/plain，这时服务器就不知道怎么解析数据了，所以才只能通过获取原始数据流的方式来进行解析请求数据。

Answer 2

在axios的请求钩子函数里，拼接json字符串的格式丢给后端

Answer 3

import qs from 'qs'
data = qs.stringify(data)

可以放到transformRequest 里去处理，这样就不会影响，你别的代码了

const service = axios.create({
  baseURL: baseUrl,
  transformRequest: [function (data) {
    // data['src'] = 'dev'
    if (data instanceof FormData) {
      return data
    }
    data = qs.stringify(data)
    return data
  }]
})

Answer 4

import axios from 'axios';
let baseUrl = ''
export const htp = axios.create({
    baseURL: baseUrl,
    timeout: 10000,
    headers: {"Content-Type": "application/x-www-form-urlencoded"},//设置头
    withCredentials: true//带cookie
});

//拦截处理请求
htp.interceptors.request.use(req => {

    return handleRequest(req)
}, error => {

    return Promise.reject(error)
})
handleRequest = req => {

    let data = req.data
    console.log('befor convert', data)
    let params = new URLSearchParams();//数据编码
    for (let name in data) {
        if (data[name] instanceof Date) {
            params.append(name, data[name].format("yyyy-MM-dd hh:mm:ss")) //日期对象转换
        } else if (data[name] instanceof Object) { //嵌套对象转换，
            for (let name2 in data[name]) {
                if ('size' == name2) {
                    params.append('pageSize', data[name][name2])
                } else if ('current' == name2) {
                    params.append('pageNo', data[name][name2])
                } else if ('search' == name) {
                    params.append(`${name2}`, data[name][name2])
                } else {
                    params.append(`${name}.${name2}`, data[name][name2])
                }

            }
        } else {
            params.append(name, data[name])//普通属性
        }
    }


    req.data = params.toString()
    console.log('after convert', req)
    return req
}