---

📘 前端項目中跨域問題及解決方式詳解（Vite 項目）

---

一、🌐 什么是跨域？

跨域（Cross-Origin） 指的是在瀏覽器中，前端頁面與服務器之間的協議、域名或端口不一致而引發的安全限制。

? 瀏覽器的同源策略（Same-Origin Policy）

瀏覽器只允許前端訪問同源資源：

• 協議相同（http/https）

• 域名相同（localhost/example.com）

• 端口相同（:3000 / :5173）

---

二、?? 跨域的典型場景

本地開發環境（Vite）：

• 頁面地址：http://localhost:5173

• 接口地址：https://api.xxx.com

你請求：

fetch('https://api.xxx.com/user/list')

會被瀏覽器攔截，提示：跨域訪問被阻止（CORS error）

---

三、🚀 如何在 Vite 項目中解決跨域？

? 方法：使用 Vite 的代理功能 server.proxy

讓本地開發服務器（Vite 內部基于 Node.js 的 server）做代理請求，從而避開瀏覽器的跨域檢查。

🔧 配置方式如下：

// vite.config.js / vite.config.ts
export default defineConfig({server: {proxy: {'/api': {target: 'https://api.xxx.com', // 實際接口地址changeOrigin: true,            // 更改請求頭中的 originrewrite: path => path.replace(/^\/api/, '') // 重寫路徑}}}
})

---

四、🔄 請求轉發流程圖解

你寫的代碼：
fetch('/api/user/list')↓ 實際發起請求http://localhost:5173/api/user/list（本地，不跨域）↓ 被 Vite dev server 攔截轉發請求到：
https://api.xxx.com/user/list↓ 后端正常響應Vite 收到響應后返回給前端

? 瀏覽器認為請求仍是同源（localhost:5173），所以不會攔截。

---

五、📌 proxy 配置參數詳解

配置項	說明
target	要代理轉發的目標地址
changeOrigin	是否更改請求頭中的 origin 字段（大多數后端要求為 true）
rewrite	重寫路徑（如把 /api/user 轉為 /user）

---

六、📦 項目部署后是否還需要代理？

不需要！

生產環境打包后，頁面與接口通常部署在同一個主域名或使用 nginx 做反向代理，此時不會跨域。

但如果接口仍然來自其他域名：

• ? 后端需配置 CORS 響應頭

• 或使用 nginx / 網關代理解決

---

在項目中，本地開發階段我通過配置 Vite 的 server.proxy 將 /api 請求代理到真實后端接口，解決瀏覽器的跨域限制問題。這樣前端請求看似是本地同源，其實由 Vite 的開發服務器中轉并轉發到目標后端，避免了 CORS 錯誤。

上線后通常不需要 proxy，接口一般會部署到同域名，或由網關統一做轉發。

---

🧩 一、Webpack 中如何解決跨域？

Webpack 本身不具備跨域代理功能，但它內置的開發服務器 —— webpack-dev-server 提供了代理（proxy）功能，可以實現與 Vite 類似的跨域解決方案。

? 常用方式：配置 devServer.proxy

示例：webpack.config.js

module.exports = {// ... 其他配置devServer: {proxy: {'/api': {target: 'https://api.xxx.com',   // 實際后端地址changeOrigin: true,              // 修改 origin 頭，防止被后端拒絕pathRewrite: { '^/api': '' },    // 可選：去除路徑中的 /api}}}
}

🔁 工作原理：

跟 Vite 類似：

前端請求：     http://localhost:8080/api/user/list
webpack dev server 攔截并轉發給：https://api.xxx.com/user/list

---

🆚 二、Vite vs Webpack 的跨域代理配置區別

項目	Webpack (webpack-dev-server)	Vite (vite.config.js)
配置位置	devServer.proxy	server.proxy
是否原生支持	需要依賴 webpack-dev-server	原生支持
路徑重寫	pathRewrite: { '^/api': '' }	rewrite: path => path.replace(/^\/api/, '')
修改 Origin	changeOrigin: true	changeOrigin: true
支持 WebSocket	需要配置 ws: true	默認支持
是否用 ES Module	基于 CommonJS 配置	基于 ESM 配置（支持 TypeScript）
適配調試體驗	相對稍復雜，熱更新速度慢	快速熱更新，默認支持現代瀏覽器特性

---

🧠 面試回答建議

在使用 Webpack 進行本地開發時，我們通過配置 devServer.proxy 來實現接口代理，將以 /api 開頭的請求代理到后端真實地址，以解決開發過程中的跨域問題。這個機制與 Vite 的 server.proxy 類似，都是由本地開發服務器中轉，避免瀏覽器 CORS 限制。

不同點在于，Vite 使用的是原生 ES 模塊和現代瀏覽器特性，配置更加簡潔，啟動和熱更新更快；Webpack 配置稍復雜但生態成熟，適用于老項目或對構建控制要求較高的場景。

---

? 總結一句話

Webpack 和 Vite 都通過“本地開發服務器代理”的方式解決跨域，本質一致，但 Vite 配置更簡單，開發體驗更好。

---