VUE項目axios請求頭怎么更改Content-Type

發(fā)布時間：2020-07-27 09:14:05 來源：億速云閱讀：606 作者：小豬欄目：開發(fā)技術(shù)

小編這次要給大家分享的是VUE項目axios請求頭怎么更改Content-Type，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

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

const httpServer = (opts, data) => {
 const token = localStorage.getItem('token')
 const PUBLIC = `&#63;token=${token}`
 let httpDefaultOpts = ''
 var host = `${process.env.HOST}`
 var prot = `${process.env.PORT}`
 var base = host +(prot&#63;":"+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)
  }
 )
 })
}

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

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

前臺使用vue項目:

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);
 //獲取并存儲服務(wù)器返回的AuthorizationToken信息
 var authorization=successResponse.headers['authorization'];
 localStorage.setItem('authorization',authorization);
 //登錄成功跳轉(zhuǎn)頁面
 this.$router.push('/dashboard');
 
 }
 })
 .catch(failResponse => {})
 }
 }

main.js(全局配置js):

//自動給同一個vue項目的所有請求添加請求頭
axios.interceptors.request.use(function (config) {
 let token = localStorage.getItem('authorization');
 if (token) {
 config.headers['Authorization'] = token;
 }
 return config;
})

看完這篇關(guān)于VUE項目axios請求頭怎么更改Content-Type的文章，如果覺得文章內(nèi)容寫得不錯的話，可以把它分享出去給更多人看到。

向AI問一下細(xì)節(jié)

VUE項目axios請求頭怎么更改Content-Type

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽