開(kāi)發(fā)環(huán)境面臨的跨域問(wèn)題

我們用webpack或vite等工具開(kāi)發(fā)本地項(xiàng)目時(shí)，瀏覽器一般會(huì)輸入的域名是：127.0.0.1:3000來(lái)調(diào)試頁(yè)面。當(dāng)要請(qǐng)求三方接口時(shí)「隨便拿個(gè)api來(lái)舉例子」，就會(huì)發(fā)生下面情況。。。

目標(biāo)服務(wù)器攔截了你的請(qǐng)求，因?yàn)樗鼈冏隽司W(wǎng)關(guān)保護(hù)策略，這種情況稱為：請(qǐng)求跨域。
但在測(cè)試和線上環(huán)境不存在，因?yàn)閔ttps://api.juejin.cn 服務(wù)器的網(wǎng)關(guān)攔截層對(duì)2個(gè)環(huán)境添加了白名單，所以不會(huì)出現(xiàn)跨域error。

那么問(wèn)題來(lái)了，我們開(kāi)發(fā)時(shí)也想調(diào)用https://api.juejin.cn的接口來(lái)獲取數(shù)據(jù)，怎么辦？？有下面幾種方法：

• 讓https://api.juejin.cn為127.0.0.1:3000開(kāi)發(fā)白名單；
• 使用mock平臺(tái)或者本地制造假數(shù)據(jù)；
• 通過(guò)網(wǎng)關(guān)代理；
• 方案1是最簡(jiǎn)單但最危險(xiǎn)的。一旦遠(yuǎn)程服務(wù)給本地開(kāi)了白名單，相當(dāng)于別人也能在本地來(lái)攻擊你的服務(wù)器，服務(wù)沒(méi)漏洞還好，一旦服務(wù)入侵后給你個(gè)刪庫(kù)跑路豈不是爽歪歪。
• 方案二也有弊端，主要體現(xiàn)在代碼入侵和代碼恢復(fù)。是否調(diào)用mock平臺(tái)可以根據(jù)環(huán)境變量來(lái)識(shí)別，但也要等后端同學(xué)把a(bǔ)pi掛上mock平臺(tái)還要做適配，無(wú)疑增加別人的工作；本地造假數(shù)據(jù)就不說(shuō)了，代碼入侵強(qiáng)不單止，當(dāng)數(shù)據(jù)結(jié)構(gòu)復(fù)雜時(shí)，還要聯(lián)動(dòng)多處修改，這些改動(dòng)假如在上線前沒(méi)一一恢復(fù)，那就等運(yùn)維給你打電話處理線上bug吧。
• 方案三通過(guò)對(duì)資源|請(qǐng)求的攔截，把127.0.0.1:3000/api/xxx請(qǐng)求路徑轉(zhuǎn)發(fā)到https://api.juejin.cn/api/xxx，并取消跨域限制，最終拿到遠(yuǎn)程數(shù)據(jù)。

小結(jié)一下：方案3無(wú)論重代碼入侵還是開(kāi)發(fā)依賴都比較小，也是目前較為主流的調(diào)試方式，固下面會(huì)對(duì)這種方案展開(kāi)細(xì)述。

常用代理方案

改本機(jī)代理或者用三方代理軟件攔截請(qǐng)求

需要額外較多的學(xué)習(xí)成本與環(huán)境搭建，舍棄了；

Vite自帶代理支持

在vite.config.ts配置代理：把127.0.0.1:3000重定向到目標(biāo)域名上，通過(guò)服務(wù)端能力跳過(guò)跨域限制：

這樣就可以把127.0.0.1:3000/example1的api轉(zhuǎn)發(fā)到https://xxx.com/example1上，并且忽略跨域限制。

但這樣做有弊端的：因?yàn)槟阍L問(wèn)的url為127.0.0.1:3000，所以凡是項(xiàng)目中涉及到三方請(qǐng)求（如三方鑒權(quán)服務(wù)返回的302登錄跳轉(zhuǎn)、跨服務(wù)合作api等）都要在這里配上，接下來(lái)可能的樣子是這樣的。。。

當(dāng)然上面有夸張成分，但是也反饋給我們一個(gè)事實(shí)：三方業(yè)務(wù)是一個(gè)不可預(yù)知的黑盒，你不知道有多少關(guān)聯(lián)的約束，因此在代理這塊不應(yīng)該做“加法”，而要做“減法”。

whistle代理「推薦」

Whistle是一款類似fiddler、charles抓包工具，功能強(qiáng)大，你可以在這里找到更多信息。

先認(rèn)識(shí)下whistle基本的代理配置：

# {瀏覽器訪問(wèn)的域名} {轉(zhuǎn)發(fā)到的目標(biāo)地址} 其他options「resCors://enable代表忽略跨域限制」
//baidu.com //127.0.0.1:3000 resCors://enable

這樣就能當(dāng)你訪問(wèn)baidu.com時(shí)，瀏覽器出來(lái)是127.0.0.1:3000的內(nèi)容。
基礎(chǔ)套路搞懂了，那接下來(lái)就說(shuō)說(shuō)如何用whistle做“減法”，達(dá)到一勞永逸的效果。

whistle 代理配置

1. 安裝whistle

npm install -g whistle

2. 啟動(dòng)whistle

# 啟動(dòng)
sudo w2 start

# 關(guān)閉
sudo w2 stop

3. 安裝插件

安裝Chrome代理插件Proxy SwitchyOmega，就是個(gè)代理選擇器，不用配本地網(wǎng)絡(luò)實(shí)現(xiàn)不同代理的快速切換。

4. Proxy SwitchyOmega配置

把你的whistle代理服務(wù)加入到Proxy SwitchyOmega中。

點(diǎn)擊插件中的“選項(xiàng)”，參考以下進(jìn)行配置：

5. whistle rules配置

打開(kāi)whistle頁(yè)面127.0.0.1:8899，左側(cè)新建1個(gè)rules，將項(xiàng)目src/.whistle（見(jiàn)下文的rules配置）內(nèi)容粘貼上去，保存。

6. 開(kāi)啟代理開(kāi)關(guān)

Proxy SwitchyOmega插件選擇你要指定的代理「第4步截圖是“whistle”」，之后訪問(wèn)遠(yuǎn)程url即可（如my.com）。

巧用 whistle

whistle rules相關(guān)配置

假如你項(xiàng)目遠(yuǎn)程域名是my.com，rules配置如下：

# 路徑：src/.whistle
# whistle配置，把所有內(nèi)容粘貼到whistle的rules即可
# 打入環(huán)境變量「有需要自行添加」
//my.com jsPrepend://{paas.js}

# 關(guān)閉跨域限制
* resCors://enable

# 指定相關(guān)地址走本地，其他走遠(yuǎn)程「window系統(tǒng)把域名前“//”去掉」
^my.com$ //127.0.0.1:3000 resCors://enable
//my.com/%23/ //127.0.0.1:3000/%23/ resCors://enable
//my.com/node_modules/ //127.0.0.1:3000/node_modules/ resCors://enable
//my.com/src/ //127.0.0.1:3000/src/ resCors://enable
//my.com/@vite/ //127.0.0.1:3000/@vite/ resCors://enable
//my.com/@id/ //127.0.0.1:3000/@id/ resCors://enable

逐行說(shuō)明：

第2行//my.woa.com jsPrepend://{paas.js}：指定mock文件，command + 左鍵 會(huì)自動(dòng)幫你創(chuàng)建paas.js文件，只需在里面寫(xiě)上你的js代碼就行了，到后面訪問(wèn)my.com時(shí)會(huì)先執(zhí)行你的邏輯，這里 有官方說(shuō)明，就不再重復(fù)說(shuō)了。這樣做的目的是增強(qiáng)框架的mock能力，靈活構(gòu)造本地環(huán)境。

第5行* resCors://enable：關(guān)閉所有跨域限制。這樣做之后，無(wú)論你項(xiàng)目有多少三方業(yè)務(wù)黑盒，都能不受跨域限制，是“減法”的關(guān)鍵步驟。

8~13行：指定相關(guān)地址走本地，其他走遠(yuǎn)程，包括：document、路由頁(yè)、vite開(kāi)發(fā)環(huán)境的資源加載固定列表等。這樣就能在全部請(qǐng)求減去指定資源后都走遠(yuǎn)程。

Vite工具庫(kù)設(shè)置

只配置 whistle 不配置 vite 的話，訪問(wèn)頁(yè)面會(huì)不停地刷新。（github issue：vite always refresh and connecting ）

為了解決這個(gè)問(wèn)題，需要在 vite.config.js 中配置 hmr策略，只涉及127.0.0.1 host資源才啟動(dòng)hmr：

export default defineConfig(({ command, mode }: ConfigEnv) => {
  return {
    // ...其他配置
    
    server: {
      hmr: {
        protocol: 'ws',
        host: '127.0.0.1'
      }
    }
  };
});

至此，只要本地項(xiàng)目啟動(dòng)后，在瀏覽器輸入my.com后，頁(yè)面加載是你的本地項(xiàng)目，而且涉及三方請(qǐng)求時(shí)，也能繞過(guò)跨域限制，做到遠(yuǎn)程環(huán)境的擬真。

代理方案效果對(duì)比

看下上面介紹2種代理方案的框架流程圖：

• Vite代理方案： 在本地服務(wù)器的基礎(chǔ)上，不斷加要跨域的proxy，隨著對(duì)接的服務(wù)增加，前端開(kāi)發(fā)環(huán)境呈現(xiàn)堆雪球式的配置疊加，并不是個(gè)好辦法；
• whistle代理： 開(kāi)始時(shí)就默認(rèn)所有proxy都能跨域，只要把不走代理的資源|路徑exclude出來(lái)即可，符合計(jì)算機(jī)工程學(xué)的“減法”規(guī)則。

以上就是Vite結(jié)合whistle實(shí)現(xiàn)一勞永逸開(kāi)發(fā)環(huán)境代理方案的詳細(xì)內(nèi)容，更多關(guān)于Vite whistle環(huán)境代理的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！