快捷導(dǎo)航

在Vue中配置代理服務(wù)器的方法詳解

更新時(shí)間：2022年12月23日 14:55:40 作者：哥們兒哥們兒學(xué)前端嗎

這篇文章主要給大家介紹了關(guān)于如何在Vue中配置代理服務(wù)器的相關(guān)資料,文中通過(guò)圖文以及示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

大家既然能看到這個(gè)視頻，說(shuō)明大家對(duì)跨域已經(jīng)有了一定的理解，所以這里就不花功夫?qū)缬蜻M(jìn)行詳細(xì)的介紹了

1. 首先擴(kuò)展一點(diǎn)，axios在本地發(fā)送的請(qǐng)求如果你不把路徑寫(xiě)全，它都是會(huì)默認(rèn)加上自己項(xiàng)目所在的端口，就比如說(shuō)

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ā)送請(qǐng)求時(shí)，會(huì)默認(rèn)發(fā)送給本地的特性來(lái)解決跨域問(wèn)題

3.如何在vue中配置代理服務(wù)器，代碼十分簡(jiǎn)單。

  devServer: {       //開(kāi)啟代理服務(wù)器 (方式1)   配置多個(gè)代理
    proxy: {
      '/api': {       //'/api'是自行設(shè)置的請(qǐng)求前綴
        target: 'http://localhost:5000',
        pathRewrite:{'^/api':''},  //路徑重寫(xiě)，（正則）匹配以api開(kāi)頭的路徑為空（將請(qǐng)求前綴刪除）
        ws: true,//用于支持websocket
        changeOrigin: true //用于控制請(qǐng)求頭中的host值
      },
  }

上述代碼中，我配置一個(gè)匹配所有前綴為/api的請(qǐng)求，也就是所有以/api為頭的請(qǐng)求都會(huì)走我上面配置的代理，向http://localhost:5000這個(gè)服務(wù)器發(fā)送請(qǐng)求。但是最前面我寫(xiě)的兩個(gè)接口為‘/student’和‘/teacher’，他們并不會(huì)走代理。

4. 如何解決呢？

我們可以利用axios的二次封裝，給所有的請(qǐng)求都添加上/api這個(gè)前綴（這個(gè)前綴是可以隨意命名的）

const requests = axios.create({
  //配置對(duì)象
  //基礎(chǔ)路徑，在發(fā)送請(qǐng)求時(shí)，路徑當(dāng)中會(huì)出現(xiàn)api
  baseURL:'/api',
  //代表請(qǐng)求超時(shí)的時(shí)間
  timeout:5000
});

此時(shí)我們點(diǎn)擊按鈕發(fā)送的請(qǐng)求為

http://localhost:8081/api/student
http://localhost:8081/api/teacher

通過(guò)代理服務(wù)器的target屬性加工之后我們?cè)鹊恼?qǐng)求就變?yōu)榱?/p>

http://localhost:5000/api/student
http://localhost:5000/api/teacher

也就是把/api前的路徑換成了目標(biāo)服務(wù)器的地址。因?yàn)?api這個(gè)前綴是我們自己添加的，所以需要用到pathRewrite 來(lái)將/api重寫(xiě)為‘’（空）

http://localhost:5000/student
http://localhost:5000/teacher

這時(shí)，我們就可以正常獲取數(shù)據(jù)了。

注意：如果在開(kāi)發(fā)中，我們拿到的所有請(qǐng)求有共同的前綴，那么我們可以省略給所有接口統(tǒng)一加上/api這一步操作。

當(dāng)然還有更加簡(jiǎn)潔的做法，讓所有的請(qǐng)求都走代理，而并不去匹配請(qǐng)求的前綴。

  devServer:{
    proxy:'http://localhost:5000'  //開(kāi)啟代理服務(wù)器 (方式2) 5000端口指的是要向5000端口發(fā)送請(qǐng)求
  },

但是這樣會(huì)有缺陷，如果你請(qǐng)求的資源本地就有，他會(huì)直接返回本地的數(shù)據(jù)，而不會(huì)向服務(wù)器發(fā)送請(qǐng)求，所以建議大家還是用方式1，雖然麻煩，但是可以配置多個(gè)代理，也不會(huì)出現(xiàn)資源直接從本地返回的情況。

總結(jié)

到此這篇關(guān)于在Vue中配置代理服務(wù)器的文章就介紹到這了,更多相關(guān)Vue配置代理服務(wù)器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: