當前端工程師搭建好頁面開始與后端進行聯(lián)調時，總是會面對跨域的問題：
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.”
解決辦法：
進入你的vue項目下 -> config -> index.js，里面的dev對象下有一個proxyTable的屬性痕寓，這個參數(shù)主要是一個地址映射表纠俭，可以幫助我們將復雜的url簡化雳锋。
如要請求的地址是api.xxx.com/list/1颂砸，可以對proxyTable進行如下配置：
proxyTable: {
'/list': {
target: 'http://api.xxx.com',
pathRewrite: {
'^/list': '/list'
}
}
}
如此一來就可以用/list/1來代替http://api.xxx.com/1灶轰。
那么又是如何解決跨域問題的呢谣沸？其實在上面的'list'的參數(shù)里有一個changeOrigin參數(shù)，接收一個布爾值笋颤，如果設置為true,那么本地會虛擬一個服務端接收你的請求并代你發(fā)送該請求乳附，這樣就不會有跨域問題了，當然這只適用于開發(fā)環(huán)境。增加的代碼如下所示：
proxyTable: {
'/list': {
target: 'http://api.xxxxxxxx.com',
changeOrigin: true,
pathRewrite: {
'^/list': '/list'
}
}
}
如果想要一套代碼兼容開發(fā)和生產環(huán)境赋除，避免在開發(fā)環(huán)境和生產環(huán)境之間切換時阱缓，頻繁修改接口調用的代碼∠椭兀可以作如下判斷：
let urlApi = ''
let url = window.location.href
if(url.indexOf('8080') > -1){
urlApi = '/list/1/xxx'
}else{
urlApi = 'http://api.xxxxxxxx.com/1/xxx'
}
