在Vue中配置代理服務(wù)器的方法詳解
大家既然能看到這個(gè)視頻，說明大家對跨域已經(jīng)有了一定的理解，所以這里就不花功夫?qū)缬蜻M(jìn)行詳細(xì)的介紹了
1. 首先擴(kuò)展一點(diǎn)，axios在本地發(fā)送的請求如果你不把路徑寫全，它都是會默認(rèn)加上自己項(xiàng)目所在的端口，就比如說
axios.get('/student')
axios.get('/teacher')點(diǎn)擊發(fā)送按鈕后，以上兩行代碼實(shí)際為
http://localhost:8081/student http://localhost:8081/teacher
其中l(wèi)ocalhost：8081為自己項(xiàng)目所在的地址。
2.代理服務(wù)器是如何解決跨域的？
由此我們可以借助axios發(fā)送請求時(shí)，會默認(rèn)發(fā)送給本地的特性來解決跨域問題
3.如何在vue中配置代理服務(wù)器，代碼十分簡單。
devServer: { //開啟代理服務(wù)器 (方式1) 配置多個(gè)代理
proxy: {
'/api': { //'/api'是自行設(shè)置的請求前綴
target: 'http://localhost:5000',
pathRewrite:{'^/api':''}, //路徑重寫，（正則）匹配以api開頭的路徑為空（將請求前綴刪除）
ws: true,//用于支持websocket
changeOrigin: true //用于控制請求頭中的host值
},
}上述代碼中，我配置一個(gè)匹配所有前綴為/api的請求，也就是所有以/api為頭的請求都會走我上面配置的代理，向http://localhost:5000這個(gè)服務(wù)器發(fā)送請求。但是最前面我寫的兩個(gè)接口為‘/student’和‘/teacher’，他們并不會走代理。
4. 如何解決呢？
我們可以利用axios的二次封裝，給所有的請求都添加上/api這個(gè)前綴（這個(gè)前綴是可以隨意命名的）
const requests = axios.create({
//配置對象
//基礎(chǔ)路徑，在發(fā)送請求時(shí)，路徑當(dāng)中會出現(xiàn)api
baseURL:'/api',
//代表請求超時(shí)的時(shí)間
timeout:5000
});此時(shí)我們點(diǎn)擊按鈕發(fā)送的請求為
http://localhost:8081/api/student http://localhost:8081/api/teacher
通過代理服務(wù)器的target屬性加工之后我們原先的請求就變?yōu)榱?/p>
http://localhost:5000/api/student http://localhost:5000/api/teacher
也就是把/api前的路徑換成了目標(biāo)服務(wù)器的地址。因?yàn)?api這個(gè)前綴是我們自己添加的，所以需要用到pathRewrite 來將/api重寫為‘’（空）
http://localhost:5000/student http://localhost:5000/teacher
這時(shí)，我們就可以正常獲取數(shù)據(jù)了。
注意：如果在開發(fā)中，我們拿到的所有請求有共同的前綴，那么我們可以省略給所有接口統(tǒng)一加上/api這一步操作。
當(dāng)然還有更加簡潔的做法，讓所有的請求都走代理，而并不去匹配請求的前綴。
devServer:{
proxy:'http://localhost:5000' //開啟代理服務(wù)器 (方式2) 5000端口指的是要向5000端口發(fā)送請求
},但是這樣會有缺陷，如果你請求的資源本地就有，他會直接返回本地的數(shù)據(jù)，而不會向服務(wù)器發(fā)送請求，所以建議大家還是用方式1，雖然麻煩，但是可以配置多個(gè)代理，也不會出現(xiàn)資源直接從本地返回的情況。
總結(jié)
到此這篇關(guān)于在Vue中配置代理服務(wù)器的文章就介紹到這了,更多相關(guān)Vue配置代理服務(wù)器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于vue中正確使用jsx的相關(guān)資料,JSX就是Javascript和XML結(jié)合的一種格式,React發(fā)明了JSX,利用HTML語法來創(chuàng)建虛擬DOM,當(dāng)遇到<,JSX就當(dāng)HTML解析,遇到{就當(dāng)JavaScript解析,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了vant框架van-cell插槽無法換行問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要給大家介紹了關(guān)于vue.js項(xiàng)目中實(shí)用的小技巧，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
當(dāng)頁面刷新時(shí),Vuex?的?state?數(shù)據(jù)會丟失,這是因?yàn)?Vuex?的狀態(tài)存儲在內(nèi)存中,刷新瀏覽器會重置?JavaScript?的運(yùn)行環(huán)境,下面我將詳細(xì)介紹幾種解決方案,從簡單到復(fù)雜,幫助你根據(jù)項(xiàng)目需求選擇最適合的方法,需要的朋友可以參考下2025-04-04
這篇文章主要介紹了Vue axios獲取token臨時(shí)令牌封裝案例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue中瀑布流布局與圖片加載優(yōu)化的實(shí)現(xiàn)
本文主要介紹了Vue中瀑布流布局與圖片加載優(yōu)化的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
Pinia是Vue的存儲庫,它允許您跨組件/頁面共享狀態(tài),下面這篇文章主要給大家介紹了Pinia中action使用方法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
vue+webpack模擬后臺數(shù)據(jù)的示例代碼
這篇文章主要介紹了vue+webpack模擬后臺數(shù)據(jù)的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
vue用BMap百度地圖實(shí)現(xiàn)即時(shí)搜索功能
這篇文章主要為大家詳細(xì)介紹了vue用BMap百度地圖實(shí)現(xiàn)即時(shí)搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
Vue中控制v-for循環(huán)次數(shù)的實(shí)現(xiàn)方法
今天小編就為大家分享一篇Vue中控制v-for循環(huán)次數(shù)的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09