Vite Server 配置與跨域問題

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

背景

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

在 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 的情況下也無法繞過瀏覽器的限制，主要用於模擬環境和路由需求的輔助。