在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提供的三種方法都比較簡單易懂,根據自己的需求選擇合適的方法即可。