Vue开发中遇到的跨域问题及解决方法


Posted in Javascript onFebruary 11, 2020

跨域是指a页面想获取b页面资源,如果a、b页面的协议、域名、端口、子域名不同,或是a页面为ip地址,b页面为域名地址,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源。

1.jsonp

原理是:动态插入script标签,通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入。

由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求。

优点是兼容性好,简单易用,支持浏览器与服务器双向通信。

缺点是只支持GET请求。

2.core

采用的是CORS(Cross-origin resource sharing)。后台在响应头中添加Access-Control-Allow-Origin。这样就可以跨域调后台接口了。 

3.vue开发期间的api代理

当将此样板与现有后端集成时,通常需要在使用dev服务器时访问后端API。为了实现这一点,我们可以并行(或远程)运行dev服务器和API后端,并让dev服务器将所有API请求代理到实际的后端。

Vue开发中遇到的跨域问题及解决方法

以上就是本次介绍的全部相关知识点,如果大家有任何补充可以联系三水点靠木小编。

Javascript 相关文章推荐
JQuery 无废话系列教程(二) jquery实战篇上
Jun 23 Javascript
JavaScript的public、private和privileged模式
Dec 28 Javascript
js 中 document.createEvent的用法
Aug 29 Javascript
JSON 数据格式介绍
Jan 13 Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
May 11 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
Jun 04 Javascript
浅析vue.js数组的变异方法
Jun 30 Javascript
Javascript操作select控件代码实例
Feb 14 Javascript
openLayer4实现动态改变标注图标
Aug 17 Javascript
原生jQuery实现只显示年份下拉框
Dec 24 jQuery
Vue data的数据响应式到底是如何实现的
Feb 11 #Javascript
JS实现TITLE悬停长久显示效果完整示例
Feb 11 #Javascript
vue.config.js中配置Vue的路径别名的方法
Feb 11 #Javascript
vue-resourc发起异步请求的方法
Feb 11 #Javascript
js实现圆形显示鼠标单击位置
Feb 11 #Javascript
JavaScript实现省份城市的三级联动
Feb 11 #Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 #Javascript
You might like
通过PHP的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
阿里云PHP SMS短信服务验证码发送方法
2017/07/11 PHP
用javascript连接access数据库的方法
2006/11/17 Javascript
javascript 显示当前系统时间代码
2009/12/28 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
javascript 获取模态窗口的滚动位置代码
2013/08/06 Javascript
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
JQuery实现table行折叠效果以JSON做数据源
2014/05/26 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
jQuery EasyUI 入门必看
2016/06/03 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
微信小程序实现无限滚动列表
2020/05/29 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
react的hooks的用法详解
2020/10/12 Javascript
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
Python去除列表中重复元素的方法
2015/03/20 Python
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
python3使用urllib模块制作网络爬虫
2016/04/08 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
C#面试问题
2016/07/29 面试题
英语自荐信范文
2013/12/11 职场文书
财务主管的岗位职责
2013/12/30 职场文书
中考冲刺决心书
2014/03/11 职场文书
新闻编辑求职信
2014/04/09 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
药店营业员岗位职责
2015/04/14 职场文书
小学一年级班主任工作经验交流材料
2015/11/02 职场文书
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS