在Vue中配置代理服務(wù)器的方法詳解
大家既然能看到這個視頻，說明大家對跨域已經(jīng)有了一定的理解，所以這里就不花功夫?qū)缬蜻M(jìn)行詳細(xì)的介紹了
1. 首先擴(kuò)展一點(diǎn)，axios在本地發(fā)送的請求如果你不把路徑寫全，它都是會默認(rèn)加上自己項目所在的端口，就比如說
axios.get('/student')
axios.get('/teacher')點(diǎn)擊發(fā)送按鈕后，以上兩行代碼實(shí)際為
http://localhost:8081/student http://localhost:8081/teacher
其中l(wèi)ocalhost：8081為自己項目所在的地址。
2.代理服務(wù)器是如何解決跨域的？
由此我們可以借助axios發(fā)送請求時，會默認(rèn)發(fā)送給本地的特性來解決跨域問題
3.如何在vue中配置代理服務(wù)器，代碼十分簡單。
devServer: { //開啟代理服務(wù)器 (方式1) 配置多個代理
proxy: {
'/api': { //'/api'是自行設(shè)置的請求前綴
target: 'http://localhost:5000',
pathRewrite:{'^/api':''}, //路徑重寫，（正則）匹配以api開頭的路徑為空（將請求前綴刪除）
ws: true,//用于支持websocket
changeOrigin: true //用于控制請求頭中的host值
},
}上述代碼中，我配置一個匹配所有前綴為/api的請求，也就是所有以/api為頭的請求都會走我上面配置的代理，向http://localhost:5000這個服務(wù)器發(fā)送請求。但是最前面我寫的兩個接口為‘/student’和‘/teacher’，他們并不會走代理。
4. 如何解決呢？
我們可以利用axios的二次封裝，給所有的請求都添加上/api這個前綴（這個前綴是可以隨意命名的）
const requests = axios.create({
//配置對象
//基礎(chǔ)路徑，在發(fā)送請求時，路徑當(dāng)中會出現(xiàn)api
baseURL:'/api',
//代表請求超時的時間
timeout:5000
});此時我們點(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ù)器的地址。因為/api這個前綴是我們自己添加的，所以需要用到pathRewrite 來將/api重寫為‘’（空）
http://localhost:5000/student http://localhost:5000/teacher
這時，我們就可以正常獲取數(shù)據(jù)了。
注意：如果在開發(fā)中，我們拿到的所有請求有共同的前綴，那么我們可以省略給所有接口統(tǒng)一加上/api這一步操作。
當(dāng)然還有更加簡潔的做法，讓所有的請求都走代理，而并不去匹配請求的前綴。
devServer:{
proxy:'http://localhost:5000' //開啟代理服務(wù)器 (方式2) 5000端口指的是要向5000端口發(fā)送請求
},但是這樣會有缺陷，如果你請求的資源本地就有，他會直接返回本地的數(shù)據(jù)，而不會向服務(wù)器發(fā)送請求，所以建議大家還是用方式1，雖然麻煩，但是可以配置多個代理，也不會出現(xiàn)資源直接從本地返回的情況。
總結(jié)
到此這篇關(guān)于在Vue中配置代理服務(wù)器的文章就介紹到這了,更多相關(guān)Vue配置代理服務(wù)器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue的路由守衛(wèi)和keep-alive后生命周期詳解
這篇文章主要為大家詳細(xì)介紹了vue路由守衛(wèi)和keep-alive，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
本文主要介紹了Vue保持用戶登錄狀態(tài)(各種token存儲方式)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
緩存清除成為克服瀏覽器緩存中過時內(nèi)容挑戰(zhàn)的關(guān)鍵技術(shù),術(shù)語“緩存清除”是指故意使靜態(tài)資源失效或進(jìn)行版本控制,迫使瀏覽器在發(fā)生更改時獲取新資源,本文給大家介紹了Vue如何清除緩存,需要的朋友可以參考下2023-12-12
vue中關(guān)于_ob_:observer的處理方式
這篇文章主要介紹了vue中關(guān)于_ob_:observer的處理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了Vue.js之slot深度復(fù)制的相關(guān)資料，文中介紹的很詳細(xì)，對大家具有一定的參考價值，需要的朋友們來一起看看吧。2017-03-03
對于一個中后臺類的項目,一個比較常見的展示形式就是Table了,這篇文章主要給大家介紹了關(guān)于Vue封裝通用table組件的相關(guān)資料,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了vue引入組件的幾種方法匯總,包括常用的局部引入,這里需要注意在哪個頁面需要就在那個頁面引入、注冊、使用,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-10-10
Vue OptionsAPI與CompositionAPI的區(qū)別與使用介紹
OptionsAPI和CompositionAPI是Vue.js框架中兩種不同的組件編寫方式,OptionsAPI通過對象字面量定義組件,以屬性分隔不同功能,響應(yīng)式數(shù)據(jù)通過data屬性定義,本文給大家介紹Vue OptionsAPI與CompositionAPI的區(qū)別,感興趣的朋友一起看看吧2024-10-10
這篇文章主要介紹了使用vue中的混入mixin優(yōu)化表單驗證插件,本文是小編給大家總結(jié)的一些表單插件的問題，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-07-07
vue3結(jié)合typescript中使用class封裝axios
這篇文章主要為大家介紹了vue3結(jié)合typescript中使用class封裝axios實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06