在Vue項(xiàng)目的開(kāi)發(fā)過(guò)程中，為了本地調(diào)試方便，通常會(huì)在vue.config.js 中配置 devServer。在devServer中配置proxy屬性，可以將指向本地的請(qǐng)求（例如： http://localhost:8080/api/action） 代理到后端的開(kāi)發(fā)服務(wù)器上（例如： http://localhost:8089/personal-management/action）。
如何理解正向代理：代理服務(wù)器代替客戶端向服務(wù)器發(fā)起請(qǐng)求。隱藏客戶端。
發(fā)起請(qǐng)求：代理服務(wù)器從客戶端發(fā)出請(qǐng)求，向目標(biāo)服務(wù)器發(fā)起請(qǐng)求。
響應(yīng)數(shù)據(jù)：目標(biāo)服務(wù)器響應(yīng)請(qǐng)求，代理服務(wù)器接收請(qǐng)求，并轉(zhuǎn)發(fā)給客戶端。
日常使用的翻墻就是基于這個(gè)原理。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-565328.html
devServer: {
/** 接口代理 */
proxy: {
'/api': {
target: 'http://localhost:8089/personal-management',
changeOrigin: true,/** 是否允許跨域 */
ws: false,//是否啟用websockets，用不到可設(shè)為false
pathRewrite: {//對(duì)路徑匹配到的字符串重寫
"^/api": "",
// 替換前綴'/api'，即：請(qǐng)求到 http://localhost:8080/api/xxx 現(xiàn)在會(huì)被代理到請(qǐng)求 http://localhost:8089/personal-management/xxx, 例如 /api/user 現(xiàn)在會(huì)被代理到請(qǐng)求 http://localhost:8089/personal-management/user
},
}
}
}
當(dāng)瀏覽器發(fā)起一個(gè)請(qǐng)求后， 前端拿配置項(xiàng)中的地址去匹配請(qǐng)求中的地址，如果請(qǐng)求的地址中包含配置中的地址，則匹配成功，匹配成功后，會(huì)將匹配到的地址及其后面的地址拼到target的后面，向后端服務(wù)器發(fā)起跨域請(qǐng)求。
舉個(gè)栗子：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-565328.html
- 瀏覽器發(fā)起請(qǐng)求：http://localhost:8080/api/user
- 和配置項(xiàng)匹配成功后，將/api/user拼接到target的后面。
- 現(xiàn)在，對(duì) /api/user 的請(qǐng)求會(huì)將請(qǐng)求代理到 http://localhost:8089/personal-management/api/user
- 如果后端接口中不包含/api，不希望傳遞/api，則需要重寫請(qǐng)求路徑 將瀏覽器發(fā)起的請(qǐng)求的請(qǐng)求URL中的 “/api” 替換為 “”
- 此時(shí)對(duì) http://localhost:8080/api/user 的請(qǐng)求，前端會(huì)將請(qǐng)求代理到 http://localhost:8089/personal-management/user
到了這里，關(guān)于VUE項(xiàng)目devServer.proxy匹配請(qǐng)求中的地址工作流程的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
