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，肯定要在這里面寫代碼，然后代理服務(wù)器就開(kāi)起來(lái)了，到底怎么寫，可以參考官方文檔：Vue腳手架代理
復(fù)制配置代碼進(jìn)行修改配置文件
注意：這里的端口是要請(qǐng)求后端的端口，并且只需要寫到端口即可，我的后端端口是9090
// 開(kāi)啟代理服務(wù)器
devServer: {
// 代理的端口是要請(qǐng)求后端的端口 寫到具體的端口即可 不需要寫具體的路徑
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，這里就要寫全路徑了，不能和配置代理服務(wù)器的時(shí)候一樣只寫端口了
再次訪問(wèn)，發(fā)現(xiàn)正常了，說(shuō)明代理有效
這種代理有兩個(gè)誤區(qū)(坑)，下面一一說(shuō)明
兩個(gè)誤區(qū)(坑)
誤區(qū)1
不能靈活的控制到底走不走代理
首先，這種代理不是什么都會(huì)代理給后端的，如果代理的東西前端有，就會(huì)直接返回，就不去找后端，比如下面這個(gè)例子
我在public目錄寫一個(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è)坑，不夠完美，想要追求完美，還得是這種方式
那么這種方式怎么寫呢？還是繼續(xù)看官方文檔：Vue腳手架代理
注意：這種配置代理和上面的配置代理只能二選一，不能同時(shí)使用！
把代碼復(fù)制到配置文件，進(jìn)行修改
devServer: {proxy: {'/api': {target: '<url>',ws: true,changeOrigin: true},'/foo': {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的縮寫，用于支持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,好家伙，你小子反水是吧
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-431994.html
配置多個(gè)代理
如果想要配置多個(gè)代理，直接復(fù)制一個(gè)即可，注意加上逗號(hào),修改端口和前綴
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-431994.html
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)先匹配前端資源）
方法二
編寫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ù)器的兩種方式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
