Axios代理配置及封裝響應攔截處理方式
Axios代理配置及響應攔截處理
Axios是vue官方推薦的異步處理方案,所以在幾個vue的項目里,都用到了,所以這里寫一下Axios的代理配置和響應攔截處理
代理配置
代理主要是為了解決跨域問題,但是現(xiàn)在常規(guī)解決跨域的方式,就是讓后端配置響應頭,使用cors方式跨域前端基本不需要任何處理。
但是有時候后端比較懶,就需要前端通過代理請求完成跨域,其實就是相當于在本地開了一個服務器,通過服務器進行向另一個服務器的代理請求。
但是這樣又會產(chǎn)生一定問題,就是再部署到服務器上時,前端項目也必須設置代理,或者直接和后端項目部署同源環(huán)境
下面是代理請求的配置:
//config/index.js 文件里 module.exports = { ? ? ?dev{ ? ? ? ? proxyTable: { ? ? ? ? ? '/': { //將開頭為 ‘/'的接口替換 ? ? ? ? ? ? target: 'http://www.hahaha.com/', ?//導向這個地址 ? ? ? ? ? ? changeOrigin: true, ? ? ? ? ? ? ws:true, ? ? ? ? ? ? pathRewrite: { ? ? ? ? ? ? ? '^/': '' ? ?//將開頭的斜杠去掉 ? ? ? ? ? ? } ? ? ? ? ? }, ? ? ? ? ? '/ws/**': { ? //因為項目中用到了websocket 所以這里還配置websocket的代理 ? ? ? ? ? ? ? target: 'ws://www.hahaha.com', ? ? ? ? ? ? ? ws: true, ? ? ? ? ? ? ? secure: false, ? ? ? ? ? ? ? logLevel: 'debug', ? ? ? ? ? } ? ? ? } ? ? ? ... ? ? } ? ?host: '0.0.0.0', //這里順便一提,把host改成'0.0.0.0‘后可以讓局域網(wǎng)內(nèi)的電腦直接訪問項目,默認是localhost ? ? ... }
響應內(nèi)容攔截處理
因為我們的axios請求響應會將網(wǎng)絡請求信息的狀態(tài)碼返回,而通常我們實際運用中不是很需要這樣的內(nèi)容,為了方便我們可以進行統(tǒng)一處理,最后只返回真正的實際內(nèi)容。
同時我們希望雖然網(wǎng)絡請求成功,但是如果請求的內(nèi)容失敗的話,也會流轉(zhuǎn)到catch步驟,也就是捕獲錯誤
代碼如下
const http = axios.create({ ? baseURL: 'api/', ? timeout: 20000, }); ? //創(chuàng)建axios對象 //對axios對象響應的攔截處理 http.interceptors.response.use((response) => { //進入這里代表請求成功,網(wǎng)絡請求狀態(tài)碼是200,但是我們要對請求的內(nèi)容是否成功進行判斷 ? if (response.data.ErrorCode !== 0) { ? //因為我們項目里設定0代表請求成功,所以非零的我們都會直接reject ? ? return Promise.reject(response.data); ? } ?? ? return Promise.resolve(response.data); //ErrorCode為0的直接返回response.data將網(wǎng)絡的狀態(tài)碼直接過濾掉 }, (error) => { //進入這里都網(wǎng)絡狀態(tài)碼非200的,可能是因為接口錯誤,也可能是沒有token等原因 ? if(error.constructor.prototype.name == "Error") { ?//這里判斷返回的是否是錯誤對象,如果是的說明是網(wǎng)絡請求錯誤 ? ? Message({ showClose: true, ? ? ? message: '網(wǎng)絡鏈接問題或登陸失效!', ? ? ? type: 'error'}) ? ? return new Promise(() => {}) //這里我們可以進行鏈式異步處理 ? } ? return error.data;//其他請求,說明是因為請求內(nèi)容錯誤了,直接返回錯誤內(nèi)容 }); //處理前返回內(nèi)容 { ? ? status: 200 ? ? statusText: "OK", ? ? data{ ? ? ?? ?ErrorCode: 0, ? ? ? ? token:'xxxx', ? ? ? ? name:'xxxx' ? ? } } //處理后返回內(nèi)容 { ? ? ErrorCode: 0, ? ? token:'xxxx', ? ? name:'xxxx' }
Axios的proxy代理配置解析
proxy實際上是一種前端開發(fā)中方便開發(fā)用的東西,它在本地可以跨域訪問其他的網(wǎng)站,但是當頁面打包之后,proxy就會失效
我是在vue.config.js中設置proxy的,代碼如下
? ? proxy: { ? ? ? //匹配到的路徑 ? ? ? "/api": { ? ? ? ? target: "XXXXXXXXX", //目標主機地址 ? ? ? ? changeOrigin: true,//是否啟動代理 ? ? ? ? pathRewrite: {?? ?//重寫路徑 ? ? ? ? ? "^/api": ''?? ?//如果遇到前綴為'/api'的url,將它重寫為'' ? ? ? ? } ? ? ? } ? ? }
舉個例子:
proxy的target設置成http://www.web-jshtml.cn/aaa
如果你想訪問http://192.168.1.114:8080/api/,這時候,你碰到了/api,你需要將/api前邊的域名轉(zhuǎn)換為target的地址,即
將http://192.168.1.114:8080轉(zhuǎn)換為http://www.web-jshtml.cn/aaa
即是
http://www.web-jshtml.cn/aaa/api/這個地址,但是因為proxy的pathRewrite里需要將'/api'轉(zhuǎn)換為空字符串,所以最終的訪問地址是
http://www.web-jshtml.cn/aaa
直接上文檔,文檔里有詳細資料
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vue+SpringBoot實現(xiàn)支付寶沙箱支付的示例代碼
本文主要介紹了Vue+SpringBoot實現(xiàn)支付寶沙箱支付的示例代碼,文中通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學習學習吧2021-06-06淺談Vuex的this.$store.commit和在Vue項目中引用公共方法
這篇文章主要介紹了淺談Vuex的this.$store.commit和在Vue項目中引用公共方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07Vue 3.0 前瞻Vue Function API新特性體驗
這篇文章主要介紹了Vue 3.0 前瞻Vue Function API新特性體驗,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-08-08vue中render函數(shù)和h函數(shù)以及jsx的使用方式
這篇文章主要介紹了vue中render函數(shù)和h函數(shù)以及jsx的使用方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08