對于前端開發(fā)人員來講藏杖,當(dāng)你在開發(fā)環(huán)境中與后臺開發(fā)人員進(jìn)行數(shù)據(jù)聯(lián)調(diào)時懂盐,總會遇到煩人的跨域問題竭恬!
解決跨域的方法有很多種跛蛋,比如你和后臺人員經(jīng)過友好協(xié)商后,你可以通過JSONP的方式或者讓后臺人員將代碼設(shè)置為允許你進(jìn)行跨域痊硕!但是往往前后臺開發(fā)人員的配合默契度是不太高的赊级。如果后臺只給你接口,并明確告訴你不允許修改接口岔绸,怎么辦此衅?怎么辦才能實現(xiàn)跨域?此時你就可以通過proxyTable來解決跨域問題亭螟!
通過proxyTable解決跨域在Vue-cli當(dāng)中是很簡單的。只需修改config文件夾下的index.js中的proxyTable就能實現(xiàn):
//代理配置表骑歹,在這里可以配置特定的請求代理到對應(yīng)的API接口
proxyTable:{
"/api":{
target:"http://www.zhangpeiyue.com",//訪問的服務(wù)器地址
changeOrigin:true,//true為開啟代理
//secure: true, // 如果是https接口预烙,需要配置這個參數(shù)
pathRewrite:{
'^/api': '/'//路徑的替換規(guī)則
/*
*這里的配置是正則表達(dá)式,以/api開頭的路徑將會被‘/'替換掉
*假如后臺文檔的接口是 "http://www.zhangpeiyue.com/user/add"
*前端調(diào)取API接口應(yīng)寫:axios.get('/api/user/add')
*/
}
}
}
以上代碼的“/api"你可以認(rèn)為用于代替target里面的地址道媚,調(diào)取接口的地址直接用api來替換扁掸。
比如后臺接口地址為:"http://www.zhangpeiyue.com/user/login"。
你可以直接寫為:"/api/user/login"即可最域。
當(dāng)然谴分,你也可以根據(jù)不同的API域名所負(fù)責(zé)的模塊不同來進(jìn)行多項配置:
//代理配置表,在這里可以配置特定的請求代理到對應(yīng)的API接口
proxyTable:{
"/adv":{
target:"http://adv.zhangpeiyue.com",//訪問的服務(wù)器地址
changeOrigin:true,//true為開啟代理
pathRewrite:{
'^/adv': '/'//路徑的替換規(guī)則
}
}镀脂,
"/user":{
target:"http://user.zhangpeiyue.com",//訪問的服務(wù)器地址
changeOrigin:true,//true為開啟代理
pathRewrite:{
'^/user': '/'//路徑的替換規(guī)則
}
}
}
以上代碼"/adv"與"/user"分別負(fù)責(zé)項目中的廣告模塊與用戶模塊牺蹄。
例如:
后臺文檔的地址是:“http://adv.zhangpeiyue.com/add”,
前端調(diào)取API接口應(yīng)寫:axios.get('/adv/add')
注意:
配置修改完以后一定要重新npm run dev 一次
補充:
changeOrigin的屬性值為一個布爾值薄翅,如果設(shè)置為true沙兰,那么本地會虛擬一個NODE服務(wù)端接收你的請求并代你發(fā)送該請求(中間件)氓奈。因為服務(wù)端語言是沒有跨域問題的,所以這樣最終就解決了跨域問題了鼎天。不過這只適用于開發(fā)環(huán)境舀奶,上線后可以使用反向代理nginx。