在vue中，因為反向代理可以隱藏真實的服務端，繞過直接請求真正的url而導致的跨域，所以需要使用反向代理來避免出現跨域問題；反向代理常用在前後端分離開發的場景中，前端需要連接後端的接口，將同源的請求傳送到反向代理伺服器。
本文操作環境：windows10系統、Vue2.9.6版，DELL G3電腦。
反向代理使用場景
在前後端分離開發的場景，前端有個伺服器（提供靜態頁面），後端有伺服器（提供介面）
此時，前端需要連接後端的接口，就會出現跨域問題
在發佈環境中，如果存在跨域問題，使用nginx
如果前後端程式碼在一個伺服器，不存在跨域問題
跨域的解決方案
#jsonp（前端解決方案）
CORS（後端解決方案）：cross origin resource sharing
#反向代理（前端解決方案）
什麼是反向代理
反向代理隱藏真實的服務端，讓瀏覽器仍然是同源
反向代理原則
## 透過偽造請求使得http請求為同源的，然後將同源的請求發送到反向代理伺服器上，由反向代理伺服器去請求真正的url，這樣就繞過直接請求真正的url導致的跨域問題反向代理程式的設定
vue-cli3的反向代理程式 在專案根目錄下新建vue.config.js檔案配置代碼：
module.exports = {undefined
lintOnSave:false,
devServer:{undefined
proxy: {
'/api': {
target: 'http://localhost:80',
changeOrigin: true,
pathRewrite: {undefined
'^/api': ""
}，
'/apidouban': {undefined
target: 'http://localhost:3001',
changeOrigin: true,
pathRewrite: {undefined
'^/apidouban': ""
}
}
}
}
}# /goods 轉換為http://localhost:80/api/goods）
## 建立虛擬伺服器
移除/api：
## 80/goods）【相關推薦：《vue.js教學》】
以上是為什麼用vue的反向代理的詳細內容。更多資訊請關注PHP中文網其他相關文章！
