vue中proxy代理的用法(解決跨域問題)
聲明
1. 首先我們應(yīng)該知道
前端axios在本地發(fā)送的請(qǐng)求如果你不把路徑寫全,它都是會(huì)默認(rèn)加上自己項(xiàng)目所在的端口,就比如說:
axios.get('/login')
axios.get('/hello')
當(dāng)我點(diǎn)擊發(fā)送按鈕之后,以上兩行代碼實(shí)際為:
http://localhost:8080/login
http://localhost:8080/hello
其中 localhost:8080 就是自己項(xiàng)目所在的地址了。實(shí)際前端就會(huì)根據(jù)以上的地址來訪問后端程序了。
2. 跨域,什么是跨域呢?
首先,明白什么是同源策略?同源就是指 協(xié)議、域名、端口 都要相同,其中任何一個(gè)不同都會(huì)出現(xiàn)跨域。例如:
http://www.baidu.com:8000
// http 是協(xié)議
// www.baidu.com 是域名
// 8000 是端口
跨域,是指瀏覽器不能執(zhí)行其他網(wǎng)站的腳本。它是由瀏覽器的同源策略造成的,是瀏覽器對(duì)JavaScript實(shí)施的安全限制。
這里說明一下,無(wú)法跨域是瀏覽器對(duì)于用戶安全的考慮。是瀏覽器的鍋。
同源策略限制了一下行為: Cookie、LocalStorage 和 IndexDB 無(wú)法讀取 DOM 和 JS 對(duì)象無(wú)法獲取 Ajax請(qǐng)求發(fā)送不出去。
前后端分離的模式下,前后端的域名是不一致的,所以就會(huì)出現(xiàn)跨域問題。
問題
當(dāng)我們開發(fā)完前端一個(gè)功能之后,需要運(yùn)行調(diào)試 ,通常前后端分離情況下,兩套程序都運(yùn)行起來之后,肯定會(huì)出現(xiàn) 協(xié)議、域名、端口不一致的形況吧。
那么前端調(diào)用后端接口時(shí)就會(huì)產(chǎn)生跨域問題。怎么辦呢?就需要代理(proxy)出場(chǎng)了。
跨域的解決方案
解決跨域的方案有很多,比如:jsonp、cors、Node代理、nginx反向代理。這里我們只討論 proxy。
vue中的proxy就是利用了Node代理。
代理服務(wù)器是如何解決跨域的?
這樣就可以串通了,前端通過axios發(fā)送請(qǐng)求時(shí),會(huì)默認(rèn)發(fā)送給本地的特性,來發(fā)送給前端配置的代理,代理根據(jù)特定規(guī)則,將地址轉(zhuǎn)換為后端的接口,并請(qǐng)求后端接口,這樣就解決了跨域的問題了。
那前端vue中怎樣配置代理服務(wù)器呢?
proxy配置
假如我現(xiàn)在想請(qǐng)求后端的 一個(gè)接口 例如:http://www.aaabbbccc.com/login ,這樣我們應(yīng)該怎樣配置代理服務(wù)器呢?
以vue cli3.0為例
// vue.config.js devServer: { //開啟代理服務(wù)器 proxy:{ "/api": { // /api是自行設(shè)置的請(qǐng)求前綴,按照這個(gè)來匹配請(qǐng)求,有這個(gè)字段的請(qǐng)求,就會(huì)走到代理來。 target: "http://www.aaabbbccc.com", // 需要代理的域名,目標(biāo)域名,會(huì)替換掉匹配字段之前的路徑 ws: false, // 是否啟用websockets changeOrigin: true, //是否跨域 pathRewrite: { //重寫匹配的字段,如果不需要放在請(qǐng)求路徑上,可以重寫為"" "^/api": "" } }, }, } //vue cli2 .0 的放在 config文件夾中的index.js 中 dev: { proxyTable:{ "/api": { target: "http://www.aaabbbccc.com", // 需要代理的域名 ws: false, // 是否啟用websockets changeOrigin: true, //開啟跨域 pathRewrite: { //重寫請(qǐng)求路徑上匹配到的字段,如果不需要在請(qǐng)求路徑上,重寫為"" "^/api": "", } }, }, }
以上配置中,我配置了一個(gè) /api,只有包含這個(gè)請(qǐng)求的路徑才會(huì)走代理,例如:
http://localhost:8080/api/login //這個(gè)就可以走代理
http://localhost:8080/login //這個(gè)就不行
可以看到,要想所有的請(qǐng)求都進(jìn)入代理中,就必須包含/api這個(gè)路徑,那么我可以對(duì)axios進(jìn)行二次封裝,給所有的請(qǐng)求加這個(gè)前綴,代碼如下:
const requests = axios.create({ baseURL:'/api', // 設(shè)置通用請(qǐng)求的地址前綴 timeout:10000 //請(qǐng)求超時(shí)的時(shí)間 }); export default requests //將requests實(shí)例,對(duì)外進(jìn)行暴露
發(fā)送請(qǐng)求可以寫為:
requests.get('/login').then((response) => {}) requests.get('/getlist').then((response) => {}) requests.get('/user/hello').then((response) => {})
此時(shí)我發(fā)送的請(qǐng)求就是:
http://localhost:8080/api/login
http://localhost:8080/api/getlist
http://localhost:8080/api/user/hello
通過代理的 target屬性 加工之后就是 :
http://www.aaabbbccc.com/api/login
http://www.aaabbbccc.com/api/getlist
http://www.aaabbbccc.com/api/user/hello
就是把 /api 之前的路徑 修改成了 target里配置的 目標(biāo)服務(wù)器的路徑。
在通過 pathRewrite屬性 將 /api 替換為空 為:
http://www.aaabbbccc.com/login
http://www.aaabbbccc.com/getlist
http://www.aaabbbccc.com/user/hello
這樣就可以訪問到后端的對(duì)應(yīng)接口了。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue + AnimeJS實(shí)現(xiàn)3d輪播圖的詳細(xì)代碼
輪播圖在開發(fā)中是經(jīng)常用到的,3D輪播圖是其中最常用的一種,所以在這篇文章中將給大家介紹Vue + AnimeJS實(shí)現(xiàn)3d輪播圖,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下2024-01-01VUE實(shí)時(shí)監(jiān)聽元素距離頂部高度的操作
這篇文章主要介紹了VUE實(shí)時(shí)監(jiān)聽元素距離頂部高度的操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07Vue異步更新機(jī)制及$nextTick原理的深入講解
最近在學(xué)習(xí)一些底層方面的知識(shí),所以想做個(gè)系列嘗試去聊聊這些比較復(fù)雜又很重要的知識(shí)點(diǎn),下面這篇文章主要給大家介紹了關(guān)于Vue異步更新機(jī)制及$nextTick原理的相關(guān)資料,需要的朋友可以參考下2022-04-04mpvue小程序循環(huán)動(dòng)畫開啟暫停的實(shí)現(xiàn)方法
這篇文章主要介紹了mpvue小程序循環(huán)動(dòng)畫開啟暫停的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05Vue2實(shí)現(xiàn)圖片的拖拽,縮放和旋轉(zhuǎn)效果的示例代碼
這篇文章主要為大家介紹了如何基于vue2?實(shí)現(xiàn)圖片的拖拽、旋轉(zhuǎn)、鼠標(biāo)滾動(dòng)放大縮小等功能。文中的示例代碼講解詳細(xì),感興趣的小伙伴可以嘗試一下2022-11-11vue-element-admin如何設(shè)置默認(rèn)語(yǔ)言
這篇文章主要介紹了vue-element-admin如何設(shè)置默認(rèn)語(yǔ)言,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04vue composition-api 封裝組合式函數(shù)的操作方法
在 Vue 應(yīng)用的概念中,“組合式函數(shù)”(Composables) 是一個(gè)利用 Vue 的組合式 API 來封裝和復(fù)用有狀態(tài)邏輯的函數(shù),這篇文章主要介紹了vue composition-api 封裝組合式函數(shù)的操作方法,需要的朋友可以參考下2022-10-10