切換語言為:簡體
Vite Server 配置與跨域問題

Vite Server 配置與跨域問題

  • 爱糖宝
  • 2024-10-31
  • 2050
  • 0
  • 0

在前端開發中,我們常常需要在開發環境中呼叫後端 API 介面。這時,跨域問題便不可避免。本文將以 Vite server 配置為例,解析跨域問題的根本原因以及解決思路。

背景

在前端開發階段,當我們嘗試從本地前端伺服器(如 localhost)請求不同域名的後端介面時,常會遇到跨域限制。例如,傳送請求後,後端返回 403 Forbidden 狀態碼,提示“Invalid CORS request”。這類跨域問題往往是由瀏覽器的安全策略所導致的。

Vite Server 配置與跨域問題

在 Vite 開發中,我們可以透過在 vite.config.js 中配置 server.proxy 來簡化跨域請求的處理。代理配置不僅方便路徑管理,還能透過引數 changeOrigin: true 模擬請求來源。很多開發者在遇到跨域問題時會設定 changeOrigin: true,希望藉此解決問題。然而,是否配置 changeOrigin 就能消除跨域限制呢?

分析

  1. 跨域請求的本質
    瀏覽器的跨域策略會根據請求的來源(origin)與目標伺服器的地址是否一致來決定是否允許訪問。例如,當我們在 localhost:5173 下訪問 http://10.8.80.208 的介面時,瀏覽器會檢測這是一個跨域請求。如果後端未正確配置允許跨域訪問,瀏覽器便會攔截該請求。

  2. Vite 代理的作用
    Vite 的 proxy 配置可以將請求路徑重定向至目標伺服器,這樣我們在開發中只需請求 /api,而代理會幫我們將請求指向 http://10.8.80.208/cmqc-stage-api。然而,瀏覽器的 CORS 檢查依舊存在,即便代理將 origin 修改爲後端地址,瀏覽器仍會驗證響應的來源。因此,代理配置的 changeOrigin: true 並不能繞過跨域檢查,僅是讓請求“看起來”來自目標伺服器的地址。

  3. 後端的 CORS 配置是關鍵
    瀏覽器的跨域限制要求後端明確支援該請求來源,因此即便代理配置了 changeOrigin: true,後端仍需要在響應中設定正確的 Access-Control-Allow-Origin 頭,才能允許跨域訪問。也就是說,CORS 的根本解決方案在於後端的支援,而非前端的代理配置。

  4. changeOrigin 的適用場景
    changeOrigin: true 在跨域問題上並無實際幫助,僅在以下場景中有輔助作用:

    • 模擬生產環境的來源:在開發中將請求偽裝成生產環境的來源,以確保相容性。

    • API 負載均衡和路由需求:當後端路由依賴 origin 路由流量時,changeOrigin 可以幫助請求被正確路由到後端的不同例項。

  5. Referer 頭的影響
    有時開發者會嘗試透過修改 Referer 頭來解決跨域問題,然而 Referer 對瀏覽器的 CORS 限制沒有任何幫助。跨域驗證依賴的是 Origin 頭,瀏覽器只會根據後端的 CORS 配置來決定是否允許跨域請求,因此 Referer 頭在跨域限制上沒有實際作用。

結論

在 Vite server 配置中,跨域問題的解決取決於後端的 CORS 設定,而非代理的 changeOrigin 配置。總結如下:

  1. 後端配置是核心:確保後端設定了正確的 Access-Control-Allow-Origin,明確允許前端的來源(如 localhost:5173)。

  2. Vite 代理的作用是簡化開發:代理可以讓路徑配置更加簡潔,方便除錯,但不會繞過跨域限制。

  3. changeOrigin 不是跨域問題的解決方案changeOrigin: true 在無法配置後端 CORS 的情況下也無法繞過瀏覽器的限制,主要用於模擬環境和路由需求的輔助。

0則評論

您的電子郵件等資訊不會被公開,以下所有項目均必填

OK! You can skip this field.