Vue腳手架配置代理服務(wù)器的兩種方式(小結(jié))
1 前言
本文主要介紹使用Vue腳手架配置代理服務(wù)器的兩種方式
注意:Vue腳手架給我們提供了兩種配置代理服務(wù)器的方式,各有千秋,使用的時(shí)候只能二選一,不能同時(shí)使用
2 代理
除了cros和jsonp,還有一種代理方式,這種用的相對(duì)來(lái)說(shuō)也很多, 一般代理服務(wù)器
這個(gè)概念很好理解,相當(dāng)于生活中的中介
在前后端直接配置一個(gè)代理服務(wù)器,這個(gè)代理服務(wù)器和前端處于一個(gè)位置,當(dāng)前端向后端請(qǐng)求數(shù)據(jù)的時(shí)候,不會(huì)直接訪問(wèn)后端,而是找這臺(tái)代理,代理收到前端的請(qǐng)求,轉(zhuǎn)發(fā)給后端,如果收到后端的響應(yīng)數(shù)據(jù),就把這些數(shù)據(jù)返回給前端
代理服務(wù)器的方式有一個(gè)東西大家應(yīng)該都聽(tīng)說(shuō)過(guò):nginx,但是nginx一般屬于后端人員掌握的,這里使用一種對(duì)前端人員更加友好的技術(shù):cli,沒(méi)錯(cuò),就是vue的腳手架,它就可以幫助我們代理服務(wù)器,相比nginx它簡(jiǎn)單的不能再簡(jiǎn)單了,只需要短短幾行代碼就可以搞定
vue腳手架配置方式1
既然想對(duì)腳手架進(jìn)行配置,肯定要改一個(gè)文件,就是vue的配置文件:vue.config.js,肯定要在這里面寫(xiě)代碼,然后代理服務(wù)器就開(kāi)起來(lái)了,到底怎么寫(xiě),可以參考官方文檔:Vue腳手架代理
復(fù)制配置代碼進(jìn)行修改配置文件
注意:這里的端口是要請(qǐng)求后端的端口,并且只需要寫(xiě)到端口即可,我的后端端口是9090
// 開(kāi)啟代理服務(wù)器 devServer: { // 代理的端口是要請(qǐng)求后端的端口 寫(xiě)到具體的端口即可 不需要寫(xiě)具體的路徑 proxy: 'http://localhost:9090' }
注意:這種代理簡(jiǎn)單,但是不完美,原因在下面
這樣就配置了一個(gè)代理服務(wù)器,一定要重啟腳手架
重啟完成后再次訪問(wèn),還是報(bào)錯(cuò)跨域問(wèn)題!
注意:雖然已經(jīng)配置了代理服務(wù)器,但是還沒(méi)用到這個(gè)代理,所以請(qǐng)求的時(shí)候不應(yīng)該是后端的端口9090,而是代理的端口8080,這里就要寫(xiě)全路徑了,不能和配置代理服務(wù)器的時(shí)候一樣只寫(xiě)端口了
再次訪問(wèn),發(fā)現(xiàn)正常了,說(shuō)明代理有效
這種代理有兩個(gè)誤區(qū)(坑),下面一一說(shuō)明
兩個(gè)誤區(qū)(坑)
誤區(qū)1
不能靈活的控制到底走不走代理
首先,這種代理不是什么都會(huì)代理給后端的,如果代理的東西前端有,就會(huì)直接返回,就不去找后端,比如下面這個(gè)例子
我在public目錄寫(xiě)一個(gè)叫queryUserInfo的文件,沒(méi)錯(cuò),和后端的接口名稱一樣
這時(shí)候請(qǐng)求就會(huì)發(fā)現(xiàn),找到前端的內(nèi)容就不會(huì)訪問(wèn)后端了
誤區(qū)2
這種代理只能代理一個(gè)服務(wù)器不能代理多個(gè)服務(wù)器,也就是說(shuō)目前代理的8080只能把請(qǐng)求交給9090,不能轉(zhuǎn)發(fā)給別人了
vue腳手架配置方式2
上面的代理方式,雖然簡(jiǎn)單,但是也有兩個(gè)坑,不夠完美,想要追求完美,還得是這種方式
那么這種方式怎么寫(xiě)呢?還是繼續(xù)看官方文檔:Vue腳手架代理
注意:這種配置代理和上面的配置代理只能二選一,不能同時(shí)使用!
把代碼復(fù)制到配置文件,進(jìn)行修改
devServer: {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->proxy: {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->'/api': {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->target: '<url>',ws: true,changeOrigin: true},'/foo': {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->target: '<other_url>'}}}
這里面有一些屬性,有的屬性可以配置使用,我們一一說(shuō)明
注意:不管修改哪個(gè)屬性,都要重啟vue!
/api和target
/api指的是請(qǐng)求前綴 這里的api可以更改 不一定非要叫api
target指的是如果請(qǐng)求前綴匹配上了,那么就找代理服務(wù)器請(qǐng)求
比如現(xiàn)在我請(qǐng)求的路徑不變還是上面的路徑
那么還是一樣的效果
這時(shí)候我把a(bǔ)pi前綴加上,理論來(lái)說(shuō)可以了,但是還是不行
不過(guò)這次不是跨域的問(wèn)題了,只是找不到請(qǐng)求
找不到請(qǐng)求是對(duì)的,因?yàn)榈暮蠖苏?qǐng)求沒(méi)有/api的前綴,那么如果忽略這個(gè)前綴呢?
pathRewrite
有這么一個(gè)屬性,官方?jīng)]有說(shuō):pathRewrite
// 忽略前綴路徑 它是一個(gè)對(duì)象 里面是key value // 這個(gè)正則意思是 如果前綴是/api,那么會(huì)替換成空字符 pathRewrite:{'^/api':''}
這個(gè)時(shí)候再測(cè)試,發(fā)現(xiàn)正常
ws
ws是websocket的縮寫(xiě),用于支持websocket,默認(rèn)為true,本人對(duì)websocket不是很了解,所以不多敘述!
changeOrigin
用于控制請(qǐng)求頭中的host值
或者說(shuō)是否真實(shí)匯報(bào)自身情況 true不真實(shí) false真實(shí) 一般為true,默認(rèn)也是true
為什么這么說(shuō)呢?我們通過(guò)下面案例查看,這時(shí)候我后端獲取請(qǐng)求的主機(jī)信息,大家注意觀察
改為false,好家伙,你小子反水是吧
配置多個(gè)代理
如果想要配置多個(gè)代理,直接復(fù)制一個(gè)即可,注意加上逗號(hào),修改端口和前綴
3 vue腳手架配置代理總結(jié)
vue腳手架配置代理 方法一 在vue.config.js中添加如下配置: devServer:{ proxy:"http://localhost:5000" } 說(shuō)明: 1. 優(yōu)點(diǎn):配置簡(jiǎn)單,請(qǐng)求資源時(shí)直接發(fā)給前端(8080)即可。 2. 缺點(diǎn):不能配置多個(gè)代理,不能靈活的控制請(qǐng)求是否走代理。 3. 工作方式:若按照上述配置代理,當(dāng)請(qǐng)求了前端不存在的資源時(shí),那么該請(qǐng)求會(huì)轉(zhuǎn)發(fā)給服務(wù)器 (優(yōu)先匹配前端資源) 方法二 編寫(xiě)vue.config.js配置具體代理規(guī)則: module.exports = { devServer: { proxy: { '/api1': {// 匹配所有以 '/api1'開(kāi)頭的請(qǐng)求路徑 target: 'http://localhost:5000',// 代理目標(biāo)的基礎(chǔ)路徑 changeOrigin: true, pathRewrite: {'^/api1': ''} }, '/api2': {// 匹配所有以 '/api2'開(kāi)頭的請(qǐng)求路徑 target: 'http://localhost:5001',// 代理目標(biāo)的基礎(chǔ)路徑 changeOrigin: true, pathRewrite: {'^/api2': ''} } } } } /* changeOrigin設(shè)置為true時(shí),服務(wù)器收到的請(qǐng)求頭中的host為:localhost:5000 changeOrigin設(shè)置為false時(shí),服務(wù)器收到的請(qǐng)求頭中的host為:localhost:8080 changeOrigin默認(rèn)值為true */ 說(shuō)明: 1. 優(yōu)點(diǎn):可以配置多個(gè)代理,且可以靈活的控制請(qǐng)求是否走代理。 2. 缺點(diǎn):配置略微繁瑣,請(qǐng)求資源時(shí)必須加前綴。
到此這篇關(guān)于Vue腳手架配置代理服務(wù)器的兩種方式(小結(jié))的文章就介紹到這了,更多相關(guān)Vue腳手架配置代理服務(wù)器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue+Element實(shí)現(xiàn)封裝抽屜彈框
這篇文章主要為大家詳細(xì)介紹了如何利用Vue和Element實(shí)現(xiàn)簡(jiǎn)單的抽屜彈框效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-06-06淺談vue中數(shù)據(jù)雙向綁定的實(shí)現(xiàn)原理
本篇文章主要介紹了淺談vue中數(shù)據(jù)雙向綁定的實(shí)現(xiàn)原理 ,主要使用v-model這個(gè)數(shù)據(jù)雙向綁定,有興趣的可以了解一下2017-09-09vue動(dòng)態(tài)生成新表單并且添加驗(yàn)證校驗(yàn)規(guī)則方式
這篇文章主要介紹了vue動(dòng)態(tài)生成新表單并且添加驗(yàn)證校驗(yàn)規(guī)則方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10Vue項(xiàng)目接入Paypal實(shí)現(xiàn)示例詳解
這篇文章主要介紹了Vue項(xiàng)目接入Paypal實(shí)現(xiàn)示例詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06ElementUI時(shí)間選擇器限制選擇范圍disabledData的使用
本文主要介紹了ElementUI時(shí)間選擇器限制選擇范圍disabledData的使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06Vuex的基本概念、項(xiàng)目搭建以及入坑點(diǎn)
Vuex是一個(gè)專門為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式,這篇文章主要介紹了Vuex的基本概念、項(xiàng)目搭建以及入坑點(diǎn),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11axios中如何進(jìn)行同步請(qǐng)求(async+await)
這篇文章主要介紹了axios中如何進(jìn)行同步請(qǐng)求(async+await),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09