vue-cli中跨域問題解決方法

webpack提供了配置代理的方法解決跨域

1 在vue-cli項目中打開webpack.dev.cof.js，以下

2 打開conifg目錄下的index.js，在 proxyTable中進行配置

1 proxyTable: {
2         '/api': {
3             target: 'http://192.168.10.202:8080/',//設置你調用的接口域名和端口號 別忘了加http
4             changeOrigin: true,
5             pathRewrite: {
6               '^/api': '/'//這裏理解成用‘/api’代替target裏面的地址，後面組件中咱們掉接口時直接用api代替 好比我要調用'http://40.00.100.100:3002/user/add'，直接寫‘/api/user/add’便可
7             }
8         }
9 },

Vie

 1 proxyTable: {
 2         '/api': {
 3             target: 'http://192.168.10.202:8080/',//設置你調用的接口域名和端口號 別忘了加http
 4             changeOrigin: true,//設置true 表明跨域訪問
 5             secure: false,  // 若是是https接口，須要配置這個參數
 6             pathRewrite: {
 7               '^/api': '/'//這裏理解成用‘/api’代替target裏面的地址，後面組件中咱們掉接口時直接用api代替 好比我要調用'http://40.00.100.100:3002/user/add'，直接寫‘/api/user/add’便可
 8             }
 9         }
10 },               

3 配置好後，就能夠獲取後臺提供的接口，而後進行頁面的渲染了

1  this.$http.get('/api/user/add')
2  .then(res=>{
3             console.log(res);
4  }).catch(err=>{
5             console.log(err);
6  });