??Vue 開發環境配置：使用 devServer.proxy 解決跨域問題??

??引言??

在現代 Web 開發中，前端和后端通常獨立開發，前端運行在?http://localhost:8080，而后端可能運行在?http://localhost:8000?或其他端口。由于瀏覽器的 ??同源策略（Same-Origin Policy）??，直接請求不同源的 API 會導致 ??跨域（CORS）錯誤??。

Vue CLI 提供了?devServer.proxy?配置，可以在開發環境下輕松設置反向代理，讓前端請求無縫轉發到后端服務器，避免跨域問題。

本文將詳細介紹如何在?vue.config.js?中配置代理，并提供實際案例和常見問題解決方案。

---

??1. 為什么需要配置代理？??

??跨域問題的產生??

• 前端運行在?http://localhost:8080（Vue DevServer）。
• 后端運行在?http://localhost:8000（如 Django、Spring Boot、Node.js）。
• 瀏覽器限制跨域請求，導致 API 調用失敗。

??解決方案??

1. ??后端設置 CORS 頭??（如?Access-Control-Allow-Origin）。
2. ??前端配置代理??（推薦，開發階段更方便）。

Vue CLI 的?devServer.proxy?可以：

• 將?/api?請求轉發到后端服務器。
• 修改請求頭，繞過瀏覽器限制。
• 支持 WebSocket、HTTPS 等高級代理。

---

??2. 配置?vue.config.js?代理??

??基本代理配置?

// vue.config.js
module.exports = {devServer: {proxy: {// 代理所有以 `/api` 開頭的請求'/api': {target: 'http://localhost:8000', // 后端服務器地址changeOrigin: true, // 修改請求頭 HostpathRewrite: {'^/api': '', // 移除 `/api` 前綴},},},},
};

配置說明??

配置項	說明
target	后端服務器地址（如?http://localhost:8000）。
changeOrigin	是否修改請求頭?Host（通常設為?true）。
pathRewrite	重寫請求路徑（如去掉?/api?前綴）。
ws	是否代理 WebSocket（默認?true）。
secure	是否驗證 HTTPS 證書（默認?true）。

---

??3. 實際案例??

??(1) 代理單一 API 路徑?

// vue.config.js
module.exports = {devServer: {proxy: {'/api': {target: 'http://localhost:8000',changeOrigin: true,},},},
};

• 前端請求??：http://localhost:8080/api/users
• ??實際請求??：http://localhost:8000/api/users

??(2) 代理多個后端服務?

// vue.config.js
module.exports = {devServer: {proxy: {'/api': {target: 'http://localhost:8000',changeOrigin: true,},'/auth': {target: 'http://localhost:8001',changeOrigin: true,},},},
};

• /api?→?http://localhost:8000
• /auth?→?http://localhost:8001

??(3) 重寫路徑（去掉前綴）?

// vue.config.js
module.exports = {devServer: {proxy: {'/api': {target: 'http://localhost:8000',changeOrigin: true,pathRewrite: {'^/api': '', // 去掉 `/api` 前綴},},},},
};

• ??前端請求??：http://localhost:8080/api/users
• ??實際請求??：http://localhost:8000/users（/api?被移除）

---

??4. 常見問題??

??(1) 代理不生效??

? ??檢查步驟??：

1. ??target?是否正確??：確保后端服務器正在運行。
2. ??請求路徑是否匹配??：前端代碼是否以?/api?開頭。
3. ??重啟 DevServer??：修改?vue.config.js?后需重啟?npm run serve。

??(2) 代理 WebSocket?

// vue.config.js
module.exports = {devServer: {proxy: {'/socket': {target: 'ws://localhost:8000',ws: true, // 啟用 WebSocket 代理},},},
};

(3) 代理 HTTPS 接口?

// vue.config.js
module.exports = {devServer: {proxy: {'/api': {target: 'https://your-backend.com',secure: false, // 忽略 HTTPS 證書驗證},},},
};

5. 完整配置示例?

// vue.config.js
module.exports = {devServer: {port: 8080, // 前端開發服務器端口open: true, // 啟動后自動打開瀏覽器proxy: {// 代理 API 請求'/api': {target: 'http://localhost:8000',changeOrigin: true,pathRewrite: { '^/api': '' },},// 代理靜態資源'/static': {target: 'http://localhost:8000',changeOrigin: true,},// 代理 WebSocket'/socket': {target: 'ws://localhost:8000',ws: true,},},},
};

6. 總結??

??場景??	??配置方式??
??基本代理??	proxy: { '/api': { target: '...' } }
??路徑重寫??	pathRewrite: { '^/api': '' }
??多路徑代理??	配置多個?proxy?條目
??WebSocket??	ws: true
??HTTPS??	secure: false

通過?devServer.proxy，你可以輕松解決開發環境下的跨域問題，讓前端請求無縫對接后端 API！