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 jQuery插件练习
Dec 24 Javascript
Jquery 实现Tab效果 思路是js思路
Mar 02 Javascript
从js向Action传中文参数出现乱码问题的解决方法
Dec 29 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
Apr 06 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
Jun 10 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
使用Web Uploader实现多文件上传
Jun 08 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
Oct 19 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
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
php5.2.0内存管理改进
2007/01/22 PHP
探讨php中防止SQL注入最好的方法是什么
2013/06/10 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
php基于单例模式封装mysql类完整实例
2016/10/18 PHP
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
2010/03/21 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
2018/08/25 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
零基础写python爬虫之抓取糗事百科代码分享
2014/11/06 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
django model 条件过滤 queryset.filter(**condtions)用法详解
2020/05/20 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
Python通过format函数格式化显示值
2020/10/17 Python
CSS3的颜色渐变效果的示例代码
2017/09/29 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
普通大学毕业生自荐信
2013/11/04 职场文书
新书发布会策划方案
2014/06/09 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
公务员爱岗敬业演讲稿
2014/08/26 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
浅谈Python数学建模之数据导入
2021/06/23 Python