谈谈axios中的请求头content-type

axios是spa项目中常用的前后端的交互方式，其实就是promise封装的ajax，如下为axios的基本使用

 

 

 

 axios使用post发送数据时，默认是直接将json放到请求体中提交到后端的，也就是说Content-Type变成了application/json；charset=utf-8,这是axios默认的请求头content-type类型。但是实际后端要求的‘Content-Type’:

'application/x-www=form-urlencodeed'为多见，与默认配置不同。就会导致请求地址和参数都对了却得不到数据。

post常见的数据格式(content-type)

1.Content-Type:application/json:请求体中的数据会以json字符串的形式发送到后端

2.Content-Type:application/x-www-form-urlencoded:请求体中的数据会以普通表单形式键值对发送到后端

3.Content-Type:multipart/form-data:它会将请求体的数据处理为一条信息，以标签为单元，用分隔符分开，既可以上传键值对也可以上传文件

下面说下常见的处理方式:

1.用URLSearchParams传递参数，比较省事

let param = new URLSearchParams()
param.append('username', 'admin')
param.append('pwd', 'admin')
axios({
    method: 'post',
    url: '/api/lockServer/search',
    data: param
})

但是这种方式不支持所有的浏览器，总体的支持比较ok，优先推荐这种解决

 

 2.就是给axios配置默认请求头

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'或者 {headers:{'Content-Type':'application/x-www-form-urlencoded'}}

然后将参数转换为query参数，利用qs

引入qs，这个库是axios里面包含的，不需要下载了

import Qs from 'qs'
let data = {
    "username": "cc",
    "psd": "123456"
}

axios({
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    method: 'post',
    url: '/api/lockServer/search',
    data: Qs.stringify(data)
})

那么对于multipart/form-data又该如何解决呢

常见的使用场景就是前端页面上传个人头像，然后点击保存发送后端修改原始数据，解决办法如下:

1.Content-Type:multipart/form-data

let params = new FormData()
        params.append('file', this.file)
        params.append('id', localStorage.getItem('userID'))
        params.append('userName', this.name)
        params.append('sex', this.sex)
        params.append('mobile', this.phone)
        params.append('email', this.email)
        params.append('qq', this.qq)
        params.append('weChat', this.WeChat)

        axios.post(URL, params, {headers: {'Content-Type': 'multipart/form-data'}}).then(res => {
          if (res.data.code === 0) {
            this.$router.go(-1)
          }
        }).catch(error => {
          alert('更新用户数据失败' + error)
        })

使用如下实现用户头像更新

 

 

2.Content-Type:application/json

 这种就是axios默认的请求数据类型了，只需要将参数序列化json字符串进行传递就行，无须多余的配置