欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

vue post 傳入 header

榮姿康2年前8瀏覽0評論

在Vue開發過程中,我們經常需要與后端進行數據交互。對于POST請求,有時候需要在請求頭中設置一些特殊參數,比如token驗證。Vue提供了一種簡單的方式來實現這個需求,接下來我們來介紹一下Vue post傳入header的方法。

axios({
method: 'post',
url: 'your url',
data: yourData,
headers: {
'Authorization': 'Bearer ' + yourToken,
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(response =>{
console.log(response)
})
.catch(error =>{
console.log(error)
})

上面的代碼是使用axios來實現post請求,并傳入了header參數。需要注意的是,headers的屬性名需要與后端API文檔中規定的一致,這里以Authorization、Content-Type和X-Requested-With為例進行說明。

Authorization是一種驗證方式,比如token access。在上面的代碼中,我們使用了Bearer驗證方式,Bearer后加上了yourToken,這個yourToken是在前端進行請求的時候從后端獲取到的。

Content-Type指定了請求的數據類型,這里是application/json類型。如果你的請求是多媒體類型(比如上傳圖片),Content-Type的值應該是multipart/form-data。

X-Requested-With是一種標識,用來標識是異步請求。這個參數是一般不需要手動添加的,因為在Vue中已經默認添加了這個標識。

上面的代碼是使用axios來實現post請求,接下來我們分別介紹一下如何使用Vue的原生方法和使用自定義插件來實現post傳入header的方法。

首先我們來看看怎樣使用Vue的原生方法來實現post傳入header。

this.$http.post('your url', {
yourData: yourData
}, {
headers: {
'Authorization': 'Bearer ' + yourToken,
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(response =>{
console.log(response)
})
.catch(error =>{
console.log(error)
})

Vue的原生方法是使用Vue-resource來實現的,同樣可以在post請求中傳入header參數。需要注意的是,在使用Vue-resource中的post方法時,第二個參數應該是一個對象,而不是一個純數據類型。

接下來我們來介紹如何使用自定義插件來實現post傳入header的方法。

import axios from 'axios'
export default {
install(Vue) {
Vue.prototype.$axios = axios.create({
headers: {
'Authorization': 'Bearer yourToken',
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
}
})
}
}

在上面的代碼中,我們創建了一個axios實例,并在實例中傳入了header參數。接下來將這個實例掛載到Vue實例上,在需要進行http請求的地方,使用this.$axios來進行調用即可。

以上就是使用Vue的三種方法來實現post傳入header的方法,對于header中的各種參數需要根據后端API文檔來進行設置。總的來說,Vue提供的三種方法都比較簡單易懂,根據自己的需求選擇合適的方法即可。