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

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

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

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

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

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

常用代理方案

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

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

Vite自帶代理支持

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

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

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

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

whistle代理「推薦」

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

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

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

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

whistle 代理配置

1. 安裝whistle

npm install -g whistle

2. 啟動whistle

# 啟動
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配置

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

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

Proxy SwitchyOmega插件選擇你要指定的代理「第4步截圖是“whistle”」，之后訪問遠(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

逐行說明：

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

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

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

Vite工具庫設(shè)置

只配置 whistle 不配置 vite 的話，訪問頁面會不停地刷新。（github issue：vite always refresh and connecting ）

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

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

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

代理方案效果對比

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

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

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

最新評論