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 相关文章推荐
js 使用form表单select类实现级联菜单效果
Dec 19 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
Aug 04 Javascript
javascript js 操作数组 增删改查的简单实现
Jun 20 Javascript
Javascript 调用 ActionScript 的简单方法
Sep 22 Javascript
JS中常用的正则表达式
Sep 29 Javascript
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
微信小程序使用navigateTo数据传递的实例
Sep 26 Javascript
Vue页面骨架屏的实现方法
May 22 Javascript
微信小程序实现倒计时补零功能
Jul 09 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
Jan 06 Javascript
简单了解Javscript中兄弟ifream的方法调用
Jun 17 Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 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
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
php基本函数汇总
2015/07/09 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
Prototype 工具函数 学习
2009/07/23 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
2014/01/09 Javascript
Jquery Ajax方法传值到action的方法
2014/05/11 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
2015/11/26 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
2017/11/07 Javascript
解决vue的 v-for 循环中图片加载路径问题
2018/09/03 Javascript
vue实现简单跑马灯效果
2020/05/25 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
python结合API实现即时天气信息
2016/01/19 Python
python PyTorch预训练示例
2018/02/11 Python
python range()函数取反序遍历sequence的方法
2018/06/25 Python
python: 自动安装缺失库文件的方法
2018/10/22 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
python实现的config文件读写功能示例
2019/09/24 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
python 利用toapi库自动生成api
2020/10/19 Python
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
HEMA法国:荷兰原创设计
2019/02/21 全球购物
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
合伙经营协议书范本
2014/09/13 职场文书
关于颐和园的导游词
2015/01/30 职场文书
“学党章、守党纪、讲党规”学习心得体会
2016/01/14 职场文书
基于PyQt5制作一个群发邮件工具
2022/04/08 Python
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技
LyScript实现绕过反调试保护的示例详解
2022/08/14 Python