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 相关文章推荐
在浏览器窗口上添加遮罩层的方法
Nov 12 Javascript
浅析js中取绝对值的2种方法
Jul 09 Javascript
深入理解JavaScript是如何实现继承的
Dec 12 Javascript
jquery选择器中的空格与大于号>、加号+与波浪号~的区别介绍
Jun 24 Javascript
Bootstrap响应式侧边栏改进版
Sep 17 Javascript
微信js-sdk地理位置接口用法示例
Oct 12 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
JS使用tofixed与round处理数据四舍五入的区别
Oct 25 Javascript
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 Javascript
原生js实现下拉选项卡
Nov 27 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
Feb 13 Javascript
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
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
php下使用SMTP发邮件的代码
2008/01/10 PHP
PHP 源代码压缩小工具
2009/12/22 PHP
php加密解密函数authcode的用法详细解析
2013/10/28 PHP
php文件下载处理方法分析
2015/04/22 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
Laravel学习教程之model validation的使用示例
2017/10/23 PHP
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
JSON.stringify 语法实例讲解
2012/03/14 Javascript
js window.print实现打印特定控件或内容
2013/09/16 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
jQuery简单图表peity.js使用示例
2014/05/02 Javascript
nodejs中操作mysql数据库示例
2014/12/20 NodeJs
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
关于Vue Webpack2单元测试示例详解
2017/08/14 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
微信小程序实现多宫格抽奖活动
2020/04/15 Javascript
Bootstrap 按钮样式与使用代码详解
2018/12/09 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
python模块导入的方法
2019/10/24 Python
Python 中 -m 的典型用法、原理解析与发展演变
2019/11/11 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
高中自我评价范文
2014/01/27 职场文书
不听老师话的万能检讨书
2014/10/04 职场文书
出差报告格式模板
2014/11/06 职场文书
科技馆观后感
2015/06/08 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python