vue 设置proxyTable参数进行代理跨域


Posted in Javascript onApril 09, 2018

什么是代理跨域

浏览器之间有同源策略,出于安全考虑不同域之间不允许获取数据,除了几个特殊的例子

<img>、<script>、<audio>等标签可以进行跨域但是通常都是以get的形式,如果用js的axios去远程获取的话进会触发同源政策,除非你服务端的代码设置了header同意让你访问,明显这很不合理呀!。现在不是都流行前后端的分离吗,后端代码跑掉了只剩下前端了,两个次元的代码我前端该怎么获取啊,感觉使用跨域好麻烦好难搞啊还不一定搞得到,这个时候就可以用到代理跨域了

代理跨域原理

所谓代理就是代替前端而是用后端发出http请求,就如vue的脚手架中,要运行项目你要输入npm run dev或npm run start吧,这个命令其实打开它已经配置好的node服务器,vue脚手架的代理就是通过node来代替前台发起http请求,既然不是浏览器发起的请求那不是就很容易啦?

vue脚手架如何代理跨域,找到在config文件夹下的index.js文件,文件中有个dev,在里面找到proxyTable{},对它进行修改

proxyTable: {
   '/api': {
    target: 'https://www.xxx.com/',//你要跨的域
    changeOrigin: true,
    pathRewrite: {
     '^/api': '/api',
    },
    headers:{
     //这边可以堆headers进行设置
    }
   },
  },

其中target是你要跨域的地址,/api是你所跨的域下的下一级路径,像上面这样就是获取https://www.xxx.com/api下的东西,然后我们引入一个ajax的包axios并进行ajax

import axios from 'axios'
axios.get('/getMessage').then(()=>{})

上面的代码执行后,会自动帮你跨域获取到https://www.xxx.com/api/getMessage的数据

总结

以上所述是小编给大家介绍的vue 设置proxyTable参数进行代理跨域,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript 面试题随笔
Mar 31 Javascript
浅析JavaScript中的delete运算符
Nov 30 Javascript
js中substring和substr的定义和用法
May 05 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
JavaScript实现多种排序算法
Feb 24 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 Javascript
Javascript实现跑马灯效果的简单实例
May 31 Javascript
详解Angular 4.x Injector
May 04 Javascript
Angularjs2不同组件间的通信实例代码
May 06 Javascript
JS实现的排列组合算法示例
Jul 16 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
Sep 02 Javascript
vue2.0实现列表数据增加和删除
Jun 17 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
Apr 09 #Javascript
快速搭建vue2.0+boostrap项目的方法
Apr 09 #Javascript
webpack 模块热替换原理
Apr 09 #Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
Apr 09 #Javascript
浅谈webpack 自动刷新与解析
Apr 09 #Javascript
webpack 插件html-webpack-plugin的具体使用
Apr 09 #Javascript
详解webpack 入门与解析
Apr 09 #Javascript
You might like
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
php 无限极分类
2008/03/27 PHP
并发下常见的加锁及锁的PHP具体实现代码
2010/10/12 PHP
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
php抽象类使用要点与注意事项分析
2015/02/09 PHP
简单的自定义php模板引擎
2016/08/26 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
浅谈javascript中关于日期和时间的基础知识
2016/07/13 Javascript
jQuery Easyui 下拉树组件combotree
2016/12/16 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
2020/08/27 Javascript
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
python实现指定字符串补全空格、前面填充0的方法
2018/11/16 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
企业文化建设实施方案
2014/03/22 职场文书
毕业生欢送会主持词
2014/03/31 职场文书
《大江保卫战》教学反思
2014/04/11 职场文书
公司授权委托书范文
2014/09/21 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
商标侵权律师函
2015/05/27 职场文书
婚宴新郎致辞
2015/07/28 职场文书
护士旷工检讨书
2015/08/15 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书
用python开发一款操作MySQL的小工具
2021/05/12 Python
pandas中DataFrame检测重复值的实现
2021/05/26 Python
Redis之RedisTemplate配置方式(序列和反序列化)
2022/03/13 Redis
python使用shell脚本创建kafka连接器
2022/04/29 Python