每次遇到跨域問題都要到網(wǎng)上查一查癌佩，每次搜索到的資料都不通卢鹦，今天我把對(duì)我有用的資料整理在一起呆躲，做個(gè)筆記腰埂，方便之后查閱
前端代理是為了解決前端跨域問題仇让，但是服務(wù)器與服務(wù)器之間不存在跨域問題西饵，所以前端代理的原理就是通過前端本地服務(wù)器向目標(biāo)服務(wù)器發(fā)送請(qǐng)求酝掩，目標(biāo)服務(wù)器返回?cái)?shù)據(jù)給本地服務(wù)器，本地服務(wù)器再把數(shù)據(jù)返回給前端
vue.config.js中配置
module.exports = {
devServer: {
proxy: {
'/api':{
target:'http://192.168.0.1', //目標(biāo)地址眷柔，實(shí)際請(qǐng)求的服務(wù)器地址期虾，代理服務(wù)器會(huì)向該服務(wù)器發(fā)送請(qǐng)求
changeOrigin: true,
secure: false, // target默認(rèn)不接受運(yùn)行在https上且使用了無效證書的后端服務(wù)器，如果想接受驯嘱，設(shè)置為false
pathRewrite:{
'^/api':'' //接口重寫镶苞，將接口中的‘/api’字符串去掉
}
}
}
}
}
上邊的‘/api’實(shí)際上是你給接口統(tǒng)一配置的前綴名，代理服務(wù)器看到這個(gè)字段就認(rèn)為是需要代理的接口鞠评，他就會(huì)重寫接口名茂蚓，并向target發(fā)送請(qǐng)求
例如：
getDolist(params) {
const url = 'api/aaa/bbb/ccc/ddd'
return http.get(url, params)
}
接口需要請(qǐng)求的是http://192.168.0.1/aaa/bbb/ccc/ddd,但是實(shí)際上瀏覽器顯示的請(qǐng)求地址是http://localhost:8080/api/aaa/bbb/ccc/ddd,本地服務(wù)器檢測到‘/api’字段，發(fā)現(xiàn)這個(gè)請(qǐng)求需要代理剃幌，所以他重寫的接口名聋涨，去掉了‘/api’字段，并向目標(biāo)服務(wù)器target發(fā)送了請(qǐng)求http://192.168.0.1/aaa/bbb/ccc/ddd负乡，目標(biāo)服務(wù)器將接口返回給代理服務(wù)器牍白，代理服務(wù)器再將數(shù)據(jù)返回給前端
