對于前端開發(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。
