Vue使用axios添加請求頭方式
更新時間：2022年06月01日 11:59:10 作者：beihcengnans
這篇文章主要介紹了Vue使用axios添加請求頭方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
使用axios添加請求頭
import axios from 'axios'
const service = axios.create({
baseURL: process.env.VUE_APP_API, // 請求的接口
timeout: 100000 // 請求超時時間
})
// 使用攔截器，定義全局請求頭
service.interceptors.request.use(config => {
// 在請求頭中添加token
config.headers.Authorization = window.localStorage.getItem("user")
return config
})
// 設置 Vue.prototype.$http 為 axios 的別名：
Vue.prototype.$http=service this.$http({
url: "url",
params: {
bookNumber: this.booknum
}
})
.then(res => {
// 成功
})
.catch(err => {
// 失敗
});axios添加自定義頭部出現(xiàn)的問題
在瀏覽器的http的 GET, POST的跨域請求中，添加自定義頭部，發(fā)送不是字符串，fromData的數(shù)據(jù)時，都是非簡單請求。
瀏覽器都預先發(fā)出OPTIONS（預檢安全請求）。
所以我們在axios中添加自定義頭部時候需要后端返回OPTIONS請求允許才進行POST或GET請求。
后端中只需要對OPTIONS請求做出允許自定義頭部和狀態(tài)200即可。
if(req.method==='OPTIONS'){
? ? ? ? res.writeHead(200,{
? ? ? ? ? ? //允許跨域
? ? ? ? ? ? "Access-Control-Allow-Origin":"*",
? ? ? ? ? ? "Access-Control-Allow-Credentials":"true",
? ? ? ? ? ? //允許請求類型
? ? ? ? ? ? "Access-Control-Allow-Methods":"*",
? ? ? ? ? ? //允許自定義頭部
? ? ? ? ? ? 'Access-Control-Allow-Headers':"*",
? ? ? ? ? ? 'Access-Control-Expose-Headers':'*'
? ? ? ? })
? ? ? ? res.end();
? ? }以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue.js element-ui validate中代碼不執(zhí)行問題解決方法
這篇文章主要介紹了vue.js element-ui validate中代碼不執(zhí)行問題解決方法,需要的朋友可以參考下2017-12-12
這篇筆記主要記錄一下基于mpvue的小程序中實現(xiàn)自定義導航的思路及應用。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
在本篇文章里小編給大家整理了關于vue下canvas裁剪圖片實例講解內(nèi)容，需要的朋友們可以參考下。2020-04-04
這篇文章主要為大家介紹了Vue使用Prism實現(xiàn)頁面代碼高亮展示示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
element UI 中的 el-tree 實現(xiàn) checkbox&n
在日常項目開發(fā)中，會經(jīng)常遇到，樹形結構的查詢方式，為了快速方便開發(fā)，常常會使用到快捷的ui組件去快速搭樹形結構，這里我用的是 element ui 中的 el-tree，對element UI 中的 el-tree 實現(xiàn) checkbox 單選框及 bus 傳遞參數(shù)的方法感興趣的朋友跟隨小編一起看看吧2022-09-09
這篇文章主要介紹了Vue實現(xiàn)漸變色進度條的代碼，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了解決Element ui導航欄選中背景色刷新消失的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了基于vue開發(fā)的在線付費課程應用過程，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-01-01
Vue.js實現(xiàn)數(shù)據(jù)響應的方法
這篇文章主要介紹了Vue.js實現(xiàn)數(shù)據(jù)響應的方法,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
這篇文章主要介紹了Vue項目中封裝axios的方法,axios 是一個輕量的 HTTP客戶端，基于 XMLHttpRequest 服務來執(zhí)行 HTTP 請求，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-05-05