談談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字符串進行傳遞就行，無須多余的配置