详解Vue-cli代理解决跨域问题
时间:2019-04-07
本文章向大家介绍详解Vue-cli代理解决跨域问题,主要包括详解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)中解决了跨域问题,生产环境中真正部署到服务器上如果是非同源还是存在跨域问题
部署到服务器上跨域解决问题,以后项目布置会继续更新。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 机器学习实践:用 Spark 和 DBSCAN 对地理定位数据进行聚类
- 【Golang语言社区】H5游戏开发从零开始开发一款H5小游戏(三) 攻守阵营,赋予粒子新的生命
- 【H5游戏实例】JS+canvas实现人机大战之五子棋
- Go包管理的探索与实践
- 机器学习优化算法之爬山算法小结
- 机器学习之最小二乘法
- Go中的同步与锁
- 机器学习之KNN算法思想及其实现
- 机器学习之决策树熵&信息增量求解算法实现
- 朴素贝叶斯分类器(离散型)算法实现(一)
- spring设置全局异常处理器
- discuz论坛apache日志hadoop大数据分析项目:hive以及hbase是如何入库以及代码实现
- 【Golang语言社区】前端编程- 从零开始开发一款H5小游戏(一) 重温canvas的基础用法
- 今天聊聊分布式锁 No.86
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- JAVA中的静态代理、动态代理以及CGLIB动态代理分析
- 基于centos7 搭建storm1.2.3集群过程
- JAVA中的浅克隆和深克隆分析
- mysql表占用多少磁盘空间以及清理表空间
- 基于docker快速搭建hbase集群
- 在springboot中对kafka进行读写操作
- [883]python安装包出现Retrying
- 深入理解java虚拟机学习笔记(三)-虚拟机性能监控与故障处理工具
- [884]Elasticsearch可视化工具
- 如何控制nodejs的线程数
- 算法篇:链表之合并有序链表
- 速读原著-UnixLinux基础(六)
- Python GUI编程:Tkinter
- JVM系列之:通过一个例子分析JIT的汇编代码
- 二叉查找树-增删查和针对重复数据处理的 Java 实现