詳解Vue-cli代理解決跨域問題

使用vue-cli調接口的時候，老是會出現跨域問題，由於vue的localhost與訪問域名不一致致使。而這一點，開發者顯然也想到了，故而在vuejs-templates，也就是vue-cli的使用的模板插件裏，有關於API proxy的說明，這個配置就是將localhost映射成訪問的域名。

那麼何爲代理？

代理服務器英文全稱是Proxy Server，其功能就是代理網絡用戶去取得網絡信息。形象的說：它是網絡信息的中轉站。能夠簡單粗暴理解爲把你的域名轉換成你訪問的域名，（我這麼記的，固然可能並不恰當）造成同源，就能訪問。

那麼在vue裏，如何設置代理？

1.config目錄找到index.js

2.在dev裏添加proxyTable

dev: {
 env: require('./dev.env'),
 port: 8080,
 autoOpenBrowser: true,
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 proxyTable: {
   '/api':{
     target:"http://47.93.166.112/BrainPcWeb",//設置你調用的接口域名和端口號 別忘了加http
     changeOrigin:true,
     pathRewrite:{
       '^/api':''//這裏理解成用‘/api'代替target裏面的地址，後面組件中咱們掉接口時直接用api代替 
            //好比我要調用'http://40.00.100.133:3002/user/login'，直接寫‘/api/user/login'便可
     }
   }
 }

這一步爲止，你從新run一下vue已經不存在跨域問題了。

若是你想在main.js把api定義成全局變量也能夠這樣，雖然畫蛇添足。代碼以下：

Vue.prototype.HOST = '/api'
//這時，你的/api/user/login就能夠換成this.HOST/user/login

可是注意了，這只是開發環境（dev）中解決了跨域問題，生產環境中真正部署到服務器上若是是非同源仍是存在跨域問題。

參考資源：http://www.jb51.net/article/124700.htm