使用http-proxy-middleware 代理解決（專案使用vue-cli腳手架搭建）

開啟config/index.js,在proxyTable中添寫如下程式碼：

proxyTable: { 
    '/api': {  //使用"/api"來代替"http://www.baidu.com" 
        target: 'http://www.baidu.com', //源地址 
        changeOrigin: true, //改變源 
        pathRewrite: { 
            '^/api': 'http://www.baidu.com' //路徑重寫 
 

        } 
    } 
}

注：儲存後，記得重啟服務

使用axios請求資料時直接使用“/api”：

getData () { 
    axios.get('/api/test', function (res) { 
        console.log(res) 
    })
}

通過這中方法去解決跨域，打包部署時還按這種方法會出問題。解決方法如下：

let serverUrl = '/api/'  //本地除錯時 
// let serverUrl = 'http://www.baidu.com/'  //打包部署上線時 
export default { 
    dataUrl
 
: serverUrl + 'test' 
}

除錯時定義一個serverUrl來替換我們的“/api”。最後打包時，只需要將“http://www.xxx.com”替換這個“/api”就可以了。