Vue代理詳解

一、Vue代理配置

Vue代理是通過配置Vue的webpack來實現的，我們需要在項目目錄中找到`.env`文件，在其中添加如下代碼：

“`
// .env
module.exports = {
devServer: {
proxy: ‘http://localhost:3000’
}
}
“`

這個簡單的配置告訴Vue開發服務器將所有指向`/api`的請求轉發到`http://localhost:3000`上，這裡的`/api`是為了處理我們請求的API地址中劃分出來的命名空間。

二、Vue配置代理

我們需要在Vue實例中添加配置項：

“`
// main.js
import axios from ‘axios’
import Vue from ‘vue’

Vue.config.productionTip = false

Vue.prototype.$http = axios.create({
baseURL: process.env.VUE_APP_BASE_URL,
timeout: 5000,
headers: {
‘Content-Type’: ‘application/json’
}
})
“`

這裡我們使用了`axios`來跟後台服務器交互，通過配置`baseURL`，設置了API請求的基礎路徑，這裡我們可以利用`.env`中的`VUE_APP_BASE_URL`變量，方便地切換不同的請求地址。

三、Vue代理事件

利用Vue提供的鉤子函數，我們可以在請求發生前和響應返回後對請求進行攔截和處理：

“`
Vue.prototype.$http.interceptors.request.use(config => {
// 在發送請求之前做些什麼
return config;
}, error => {
// 對請求錯誤做些什麼
return Promise.reject(error);
});

Vue.prototype.$http.interceptors.response.use(response => {
// 對響應數據做些事情
return response;
}, error => {
// 對響應錯誤做些事情
return Promise.reject(error);
});
“`

四、Vue代理解決跨域

Vue代理最常用的功能就是解決跨域問題，在開發環境中，我們通常會把API接口和Vue程序部署在不同的服務器上，這時候就會存在跨域請求的情況。這時候，我們可以通過Vue代理來將API請求路由到本地服務器上：

“`
// vue.config.js
module.exports = {
devServer: {
proxy: {
‘/api’: {
target: ‘http://localhost:3000’,
changeOrigin: true,
}
}
}
}
“`

這裡我們設置了代理路徑為`/api`，並且將所有指向該路徑的請求轉發到`http://localhost:3000`上，`changeOrigin`選項表示是否將請求的源地址修改為代理服務器的地址。

五、Vue代理原理

Vue代理本質上是一個中間件，當我們發送API請求時，它會進行攔截和處理，將請求轉發到指定的API服務器上。這裡我們使用的是webpack-dev-server提供的中間件，它的作用是將我們的Vue應用部署到本地服務器上，並提供實時的熱更新功能，這樣我們就可以進行開發和調試而不必每次都重新打包和上傳整個應用程序。

六、Vue代理服務器

Vue代理服務器可以理解為我們的中間件，它是負責處理API請求的主要組件。我們可以在`vue.config.js`文件中配置不同的代理規則：

“`
// vue.config.js
module.exports = {
devServer: {
proxy: {
‘/api’: {
target: ‘http://localhost:3000’,
changeOrigin: true,
pathRewrite: { ‘^/api’: ” }
}
}
}
}
“`

這裡添加了`pathRewrite`選項，用於將所有API請求的前綴`/api`替換為空字符串，這樣我們就可以直接通過相對路徑來發送請求了。

七、Vue代理加載過程

Vue代理加載過程通常是由Webpack和webpack-dev-server進行自動化配置的，其主要步驟如下：

1. 設置代理路徑和目標地址

我們需要在`.env`或`vue.config.js`文件中設置代理規則，指定代理路徑和代理目標，例如：

“`
// .env
module.exports = {
devServer: {
proxy: ‘http://localhost:3000’
}
}
“`

2. 自動識別被代理的API請求

webpack-dev-server會自動匹配所有的API請求，並將這些請求轉發給代理服務器。

3. 請求被代理服務器處理

請求會先到達代理服務器，代理服務器負責處理這些請求，將請求轉發給真實的API服務器。

4. API服務器響應請求

API服務器處理完請求後會返迴響應結果，響應結果會先被發往代理服務器，再從代理服務器發往客戶端瀏覽器，最終將結果展示在頁面上。

八、Vue代理沒有生效

在Vue代理過程中，我們有時候會發現代理規則沒有生效，這可能是因為我們沒有正確地配置代理規則，或者是因為webpack-dev-server沒有正確地讀取我們的配置文件。解決這個問題，通常可以採用如下辦法：

1. 確認代理規則是否正確設置

我們可以在`vue.config.js`中對代理規則進行調整，並確保調整後的規則已經被正確地讀取：

“`
// vue.config.js
module.exports = {
devServer: {
proxy: {
‘/api’: {
target: ‘http://localhost:3000’,
changeOrigin: true,
pathRewrite: { ‘^/api’: ” }
}
}
}
}
“`

2. 確認代理服務器是否正常運行

我們可以使用curl等工具嘗試直接訪問API服務器來確認其是否正常運行：

“`
curl http://localhost:3000/api/test
“`

如果API返回了正確的結果，則表示代理服務器已經正常運行。

3. 確認webpack-dev-server是否正確讀取了配置文件

我們可以在命令行中執行如下命令，來檢查webpack-dev-server是否正確地讀取了配置文件：

“`
vue-cli-service serve –open –mode development
“`

如果此時代理規則已經生效，則我們可以進一步排查其他問題。

九、Vue代理網關

Vue代理網關可以理解為我們的中間件棧，當一個API請求到達代理服務器時，它會先經過一系列的中間件處理，最終到達真實的API服務器。我們可以在中間件中添加一些處理邏輯，例如：

“`
// vue.config.js
module.exports = {
devServer: {
before(app){
app.use((req, res, next) => {
console.log(`${req.method} ${req.url}`)
next()
})
},
proxy: ‘http://localhost:3000’,
},
}
“`

這裡我們通過`before`選項向webpack-dev-server註冊了一個全局的中間件，用於記錄所有API請求的方法和路徑。

十、Vue代理模式源碼

Vue代理是通過webpack-dev-server提供的中間件和代理機制來實現的，我們可以查看其源碼來深入了解其實現原理。以下是其中的一部分代碼：

“`
// webpack-dev-server/lib/Server.js

class Server {
constructor(options = {}) {
// 配置各種中間件
this.middleware = []
this.setupMiddleware()

// 配置代理規則
this.proxy = []

// 啟動服務器
this.server = http.createServer(this.app)
this.server.on(‘error’, err => {
console.log(err)
})
this.server.listen(options.port, options.host, () => {
console.log(`Listening on ${options.host}:${options.port}`)
})
}

setupMiddleware() {
// 設置WebSocket服務器
this.middleware.push(websocket(this))
// 設置靜態文件服務器
this.middleware.push(this.serveStatic())
// 設置熱更新服務器
this.middleware.push(this.serveHMR())
// 設置API代理
this.middleware.push(this.createProxyMiddleware())
// 設置HTML文件服務器
this.middleware.push(this.serveAssets())
}

createProxyMiddleware() {
const proxy = httpProxy.createProxyServer()
return (req, res, next) => {
// 匹配代理規則
const matchResult = this.matchProxy(req)

if (!matchResult) {
return next()
}

// 轉發請求到代理服務器
const {target, path, rewrite} = matchResult
req.url = rewrite(req.url)
req.headers.host = target.host
proxy.web(req, res, {target: target.href})
}
}

}
“`

這裡我們可以看到，webpack-dev-server通過一系列中間件的組合實現了Vue代理的基本功能，通過代理中間件和API代理等組件，它可以將API請求根據規則轉發到指定的API服務器上，從而實現跨越請求和服務代理等功能。