我就廢話不多說了，大家還是直接看代碼吧~

const httpServer = (opts, data) => { const token = localStorage.getItem(’token’) const PUBLIC = `?token=${token}` let httpDefaultOpts = ’’ var host = `${process.env.HOST}` var prot = `${process.env.PORT}` var base = host +(prot?':'+prot:'') if (opts.method === ’post’) { httpDefaultOpts = { method: opts.method, url: `${base}${opts.url}${PUBLIC}`, headers:{’Content-Type’:’application/text/html;charset=utf-8’ //改這里就好了}, data: data } } else { httpDefaultOpts = opts } return new Promise(function (resolve, reject) { Axios(httpDefaultOpts).then( (res) => { successState(res) resolve(res) } ).catch( (err) => { errorState(err) reject(err) } ) })}

補(bǔ)充知識(shí)：Vue獲取并存儲(chǔ)服務(wù)器返回的AuthorizationToken信息并給每次請(qǐng)求添加上token

由于后臺(tái)是用jwt的token進(jìn)行身份權(quán)限驗(yàn)證，后臺(tái)在登錄后把token添加響應(yīng)頭里，所以前臺(tái)需要把這個(gè)token存放起來，并給每次請(qǐng)求的請(qǐng)求頭添加上token，服務(wù)器才能獲取token進(jìn)行身份認(rèn)證。

前臺(tái)使用vue項(xiàng)目:

loging.vue(登錄組件)

{ submitForm(formName) { this.$axios .post(’/api/admin/login’, { userName: this.ruleForm.userName, password: this.ruleForm.password }) .then(successResponse => { this.responseResult = JSON.stringify(successResponse.data) this.msg = JSON.stringify(successResponse.data.msg) if (successResponse.data.code === 200) { this.msg=’’; localStorage.setItem(’userName’,this.ruleForm.userName); //獲取并存儲(chǔ)服務(wù)器返回的AuthorizationToken信息 var authorization=successResponse.headers[’authorization’]; localStorage.setItem(’authorization’,authorization); //登錄成功跳轉(zhuǎn)頁面 this.$router.push(’/dashboard’); } }) .catch(failResponse => {}) } }

main.js(全局配置js):

//自動(dòng)給同一個(gè)vue項(xiàng)目的所有請(qǐng)求添加請(qǐng)求頭axios.interceptors.request.use(function (config) { let token = localStorage.getItem(’authorization’); if (token) { config.headers[’Authorization’] = token; } return config;})

這里還需要考慮token過期失效的問題，博主將會(huì)在后續(xù)另寫博客補(bǔ)充。

以上這篇VUE項(xiàng)目axios請(qǐng)求頭更改Content-Type操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。