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 相关文章推荐
juqery 学习之五 文档处理 包裹、替换、删除、复制
Feb 11 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
Nov 13 Javascript
js导航栏单击事件背景变换示例代码
Jan 13 Javascript
JavaScript判断浏览器类型的方法
Feb 10 Javascript
js实现汉字排序的方法
Jul 23 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
Dec 20 Javascript
基于javascript实现九宫格大转盘效果
May 28 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
May 09 Javascript
JS简单生成由字母数字组合随机字符串示例
May 25 Javascript
JavaScript 中的 this 工作原理
Jun 20 Javascript
如何手动实现es5中的bind方法详解
Dec 07 Javascript
微信小程序实现展示评分结果功能
Feb 15 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
Base64在线编码解码实现代码 演示与下载
2011/01/08 PHP
解析PHP中的file_get_contents获取远程页面乱码的问题
2013/06/25 PHP
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
AngularJS基础 ng-csp 指令详解
2016/08/01 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
2016/10/25 Javascript
js判断是否是手机页面
2017/03/17 Javascript
vuex 的简单使用
2018/03/22 Javascript
详解用JS添加和删除class类名
2019/03/25 Javascript
vue使用keep-alive保持滚动条位置的实现方法
2019/04/09 Javascript
js中数组常用方法总结(推荐)
2019/04/09 Javascript
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
Python中的生成器和yield详细介绍
2015/01/09 Python
Python while、for、生成器、列表推导等语句的执行效率测试
2015/06/03 Python
简单了解Python3里的一些新特性
2019/07/13 Python
python异常处理和日志处理方式
2019/12/24 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
彪马美国官网:PUMA美国
2017/03/09 全球购物
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
开展党的群众路线教育实践活动方案
2014/02/05 职场文书
学生会干部自我鉴定2014
2014/09/18 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
新闻报道稿范文
2015/07/23 职场文书
班主任培训研修日志
2015/11/13 职场文书
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python
redis 查看所有的key方式
2021/05/07 Redis
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android