VUE項目axios請求頭更改Content-Type操作
我就廢話不多說了,大家還是直接看代碼吧~
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)
}
)
})
}
補充知識:Vue獲取并存儲服務(wù)器返回的AuthorizationToken信息并給每次請求添加上token
由于后臺是用jwt的token進行身份權(quán)限驗證,后臺在登錄后把token添加響應(yīng)頭里,所以前臺需要把這個token存放起來,并給每次請求的請求頭添加上token,服務(wù)器才能獲取token進行身份認證。
前臺使用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;
})
這里還需要考慮token過期失效的問題,博主將會在后續(xù)另寫博客補充。
以上這篇VUE項目axios請求頭更改Content-Type操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
去掉vue 中的代碼規(guī)范檢測兩種方法(Eslint驗證)
我們在使用vue 腳手架時,為了規(guī)范團隊的代碼格式,會有一個代碼規(guī)范檢測,如果不符合規(guī)范就會報錯,有時候我們不想按照他的規(guī)范去寫。這時我們需要關(guān)閉,這里腳本之家小編給大家?guī)砹巳サ魐ue 中的代碼規(guī)范檢測兩種方法(Eslint驗證),一起看看吧2018-03-03
vue 根據(jù)數(shù)組中某一項的值進行排序的方法
這篇文章主要介紹了vue 根據(jù)數(shù)組中某一項的值進行排序的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08

