详解Vue-cli代理解决跨域问题


Posted in Javascript onSeptember 27, 2017

使用vue-cli调接口的时候,总是会出现垮与问题,因为vue的localhost与访问域名不一致导致。而这一点,开发者显然也想到了,故而在vuejs-templates,也就是vue-cli的使用的模板插件里,有关于API proxy的说明,这个配置就是将localhost映射成访问的域名。

那么何为代理?

代理服务器英文全称是Proxy Server,其功能就是代理网络用户去取得网络信息。形象的说:它是网络信息的中转站。可以简单粗暴理解为把你的域名转换成你访问的域名,(我这么记的,当然可能并不恰当)形成同源,就能访问。

那么在vue里,如何设置代理?

1.config目录找到index.js

详解Vue-cli代理解决跨域问题

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)中解决了跨域问题,生产环境中真正部署到服务器上如果是非同源还是存在跨域问题

部署到服务器上跨域解决问题,以后项目布置会继续更新。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的设置页面文本框 只能输入数字的实现代码
Apr 19 Javascript
jQuery中eq()方法用法实例
Jan 05 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
jquery实现具有嵌套功能的选项卡
Feb 12 Javascript
Vue表单验证插件的制作过程
Apr 01 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
Vue 表情包输入组件的实现代码
Jan 21 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
May 10 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
Aug 29 Javascript
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 #jQuery
javascript 作用于作用域链的详解
Sep 27 #Javascript
深入理解Vue2.x的虚拟DOM diff原理
Sep 27 #Javascript
bootstrap table实现双击可编辑、添加、删除行功能
Sep 27 #Javascript
Three.js中网格对象MESH的属性与方法详解
Sep 27 #Javascript
JS实现的简单四则运算计算器功能示例
Sep 27 #Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 #Javascript
You might like
一个php作的文本留言本的例子(六)
2006/10/09 PHP
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
CI框架入门之MVC简单示例
2016/11/21 PHP
用htc组件制作windows选项卡
2007/01/13 Javascript
(function(){})()的用法与优点
2007/03/11 Javascript
Javascript注入技巧
2007/06/22 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
2013/03/19 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
javascript设置连续两次点击按钮时间间隔的方法
2014/10/28 Javascript
javascript实现链接单选效果的方法
2015/05/13 Javascript
javascript中动态函数用法实例分析
2015/05/14 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
vue实例的选项总结
2020/06/09 Javascript
跟老齐学Python之编写类之一创建实例
2014/10/11 Python
python实现的简单文本类游戏实例
2015/04/28 Python
python 转换 Javascript %u 字符串为python unicode的代码
2016/09/06 Python
使用Python对Excel进行读写操作
2017/03/30 Python
对Python Pexpect 模块的使用说明详解
2019/02/14 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
拿来就用!Python批量合并PDF的示例代码
2020/08/10 Python
Python 通过正则表达式快速获取电影的下载地址
2020/08/17 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
VIVOBAREFOOT赤脚鞋:让您的脚做自然的事情
2017/06/01 全球购物
拉丁舞学习者的自我评价
2013/10/27 职场文书
毕业生实习鉴定
2013/12/11 职场文书
销售主管的自我评价分享
2014/01/03 职场文书
助理政工师申报材料
2014/06/03 职场文书
优秀党员事迹材料
2014/12/18 职场文书
文明家庭事迹材料
2014/12/20 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
详解Python自动化之文件自动化处理
2021/06/21 Python