详解Vue-cli代理解决跨域问题
更新时间：2017年09月27日 10:55:51 作者：J_Cherry
本篇文章主要介绍了Vue-cli代理解决跨域问题，详细的介绍了Vue如何设置代理，具有一定参考价值，有兴趣的可以了解一下
使用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）中解决了跨域问题，生产环境中真正部署到服务器上如果是非同源还是存在跨域问题
部署到服务器上跨域解决问题，以后项目布置会继续更新。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了vite的搭建与使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
vue3使用element-plus搭建后台管理系统之菜单管理功能
这篇文章主要介绍了vue3使用element-plus搭建后台管理系统之菜单管理,使用element-plus el-tree组件快速开发树形菜单结构，el-tree组件中filter-node-method事件便可以实现树形菜单筛选过滤功能，需要的朋友可以参考下2022-04-04
指令是Vue.js中一个重要的特性， 主要提供了一种机制将数据的变化映射为DOM行为。下面通过本文给大家分享Vue.js的组件和模板，需要的朋友参考下吧2017-10-10
这篇文章主要介绍了vue中的封装常用工具类，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
本文给大家分享vue自定义组件的四种方式，通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2020-02-02
这篇文章主要介绍了vue.js body的css不生效问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
本篇文章主要介绍了Vue中添加过渡效果的方法，Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果，有兴趣的同学可以了解一下。2017-03-03
这篇文章主要介绍了vue3.0中sass全局的使用过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要为大家介绍了vue3响应式Object代理对象的读取示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
今天小编就为大家分享一篇Vue实现push数组并删除的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
最新评论