详解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