在項目開發的時候,接口聯調的時候一般都是同域名下,且不存在跨域的情況下進行接口聯調,但是當我們現在使用vue-cli進行項目打包的時候,我們在本地啟動服務器后,比如本地開發服務下是 http://localhost:8080 這樣的訪問頁面,但是我們的接口地址是 http://localhost:3000這樣的接口地址,我們這樣直接使用會存在跨域的請求,導致接口請求不成功,VUE通過proxyTable來解決,因此我們需要在打包的時候配置一下,我們進入 config/index.js 進行如下配置即可:
/*代理配置表,在這里可以配置特定的請求代理到對應的API接口*/ /* 下面的例子將代理請求 /api/getNewsList 到 http://localhost:3000/getNewsList*/ proxyTable: { '/api': { changeOrigin: true,// 如果接口跨域,需要進行這個參數配置 target: 'http://localhost:3000',// 接口的域名 pathRewrite: { '^/api': ''//后面可以使重寫的新路徑,一般不做更改 } }
配置好后,該如何使用呢?使用vue-resouce發送Ajax獲取數據
this.$http.get('/api/getNewsList')//代替http://localhost:3000/getNewsList .then((res) => { this.newsList = res.data }, (err) => { console.log(err) })
配置好代理后如果請求不到數據,可以訪問原本的服務器接口 http://localhost:3000/getNewsList,如果直接訪問服務器接口可以請求到數據那么就是請求代理配置有問題,否則就是其它問題。
注意:配置好后,一定要npm run dev 重新啟動項目!!!