最近做練習(xí)demo的時(shí)候再一次遇到了前端代理請(qǐng)求孕惜，一開(kāi)始的時(shí)候打算按照傳統(tǒng)從已有的項(xiàng)目中將這部分的代碼直接copy過(guò)來(lái)闸衫，但是突然想到現(xiàn)在用的是vite+ts+vue3的框架排作，之前已有的項(xiàng)目用的是vue-cli+js+vue2泡挺，不能直接照搬渐裸，于是乎先百度 [vite proxy http]，出來(lái)了很多與之相關(guān)的內(nèi)容仍劈，找了一個(gè)最靠譜的copy之厕倍。但后面發(fā)現(xiàn)好像并沒(méi)有成功，因?yàn)闉g覽器依舊在提醒我跨域了贩疙。于是乎重新找了各種資料讹弯，淺淺地研究了一下前端代理請(qǐng)求這塊兒，現(xiàn)在將收獲記錄在這里屋群，以防我后面搞忘了又要去到處找原因闸婴。
首先說(shuō)一下原理，它就像一個(gè)中轉(zhuǎn)站芍躏，本來(lái)頁(yè)面上的各種請(qǐng)求是直接到后端服務(wù)器上邪乍，但是因?yàn)榭缬虻脑颍ㄈ绻蠖嗽O(shè)置了請(qǐng)求頭則沒(méi)有這個(gè)問(wèn)題，這里暫時(shí)不展開(kāi)這個(gè)話題）对竣，后端接受不到這個(gè)請(qǐng)求庇楞，于是我們先訪問(wèn)本地的代理服務(wù)器（中轉(zhuǎn)站），它再將本地的請(qǐng)求轉(zhuǎn)發(fā)到后端服務(wù)器否纬，服務(wù)器與服務(wù)器之前通信就不會(huì)有跨域的問(wèn)題了吕晌。大概就是這樣。
再來(lái)說(shuō)下怎么運(yùn)用到項(xiàng)目中临燃。項(xiàng)目中使用axios的時(shí)候會(huì)設(shè)置一個(gè)baseUrl睛驳，假如為：'/api'，發(fā)送請(qǐng)求的時(shí)候還會(huì)有一個(gè)具體的url膜廊，假如為：'/user/login'乏沸，那么整個(gè)請(qǐng)求完整的路徑就為：'/api/user/login'，如果是后端處理跨域的話爪瓜，這個(gè)時(shí)候直接將baseUrl設(shè)置成后端地址就好：'http://127.0.0.1:3000/'蹬跃，那么完整的請(qǐng)求就為：'http://127.0.0.1:3000/user/login'，就可以直接訪問(wèn)了铆铆。如果需要設(shè)置代理蝶缀，那么baseUrl就不能為一個(gè)具體的地址丹喻，而是對(duì)應(yīng)代理中設(shè)置的key，即proxy對(duì)象的屬性名翁都，vite中清楚的說(shuō)明了這點(diǎn)：（vite官網(wǎng)：https://cn.vitejs.dev/config/server-options.html#server-host）
vite中proxy的例子：
紅框圈中的部分屬于比較通用的例子碍论，我也是用的這種配置方法。
此時(shí)項(xiàng)目中的請(qǐng)求的訪問(wèn)就變成了：http://localhost:3000/api/bar -> http://target/bar
