详解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 相关文章推荐
js版本A*寻路算法
Dec 22 Javascript
理清apply(),call()的区别和关系
Aug 14 Javascript
容易被忽略的JS脚本特性
Sep 13 Javascript
用javascript替换URL中的参数值示例代码
Jan 27 Javascript
javascript修改IMG标签的src问题
Mar 28 Javascript
seajs模块之间依赖的加载以及模块的执行
Oct 21 Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 Javascript
webpack之devtool详解
Feb 10 Javascript
解决Vue打包之后文件路径出错的问题
Mar 06 Javascript
Webpack的dll功能使用
Jun 28 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 Javascript
vue实现虚拟列表功能的代码
Jul 28 Javascript
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
Apache, PHP在Windows 9x/NT下的安装与配置 (二)
2006/10/09 PHP
php解析mht文件转换成html的实例
2017/03/13 PHP
php简单计算权重的方法示例【适合抽奖类应用】
2019/06/10 PHP
php实现记事本案例
2020/10/20 PHP
javascript学习网址备忘
2007/05/29 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
2010/01/15 Javascript
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
url地址自动加#号问题说明
2010/08/21 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
2020/04/04 Javascript
对frameset、frame、iframe的js操作示例代码
2013/08/16 Javascript
javascript匿名函数实例分析
2014/11/18 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
2018/02/26 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
python UNIX_TIMESTAMP时间处理方法分析
2016/04/18 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
Ubuntu安装Jupyter Notebook教程
2017/10/18 Python
python3.x上post发送json数据
2018/03/04 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
时尚、社区、科技:SEVENSTORE
2019/04/26 全球购物
领导的自我鉴定
2013/12/28 职场文书
工地宣传标语
2014/06/18 职场文书
创先争优标语
2014/06/27 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
公司租车协议书
2015/01/29 职场文书
单位同意报考证明
2015/06/17 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书
图神经网络GNN算法
2022/05/11 Python
redis lua限流算法实现示例
2022/07/15 Redis
React更新渲染原理深入分析
2022/12/24 Javascript