详解Vue-cli代理解决跨域问题
使用vue-cli调接口的时候,总是会出现垮与问题,因为vue的localhost与访问域名不一致导致。而这一点,开发者显然也想到了,故而在vuejs-templates,也就是vue-cli的使用的模板插件里,有关于API proxy的说明,这个配置就是将localhost映射成访问的域名。
创新互联专注于企业成都全网营销、网站重做改版、临澧网站定制设计、自适应品牌网站建设、H5建站、购物商城网站建设、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为临澧等各大城市提供网站开发制作服务。
那么何为代理?
代理服务器英文全称是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)中解决了跨域问题,生产环境中真正部署到服务器上如果是非同源还是存在跨域问题
部署到服务器上跨域解决问题,以后项目布置会继续更新。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
网站名称:详解Vue-cli代理解决跨域问题
文章地址:http://azwzsj.com/article/jcpohg.html