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 相关文章推荐
Prototype使用指南之hash.js
Jan 10 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
Feb 09 Javascript
登陆成功后自动计算秒数执行跳转
Jan 23 Javascript
9款2014最热门jQuery实用特效推荐
Dec 07 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 Javascript
node.js 和HTML5开发本地桌面应用程序
Dec 13 Javascript
微信小程序 MD5的方法详解及实例代码
Mar 10 Javascript
vue计算属性和监听器实例解析
May 10 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 Javascript
初学vue出现空格警告的原因及其解决方案
Oct 31 Javascript
Vue实现点击箭头上下移动效果
Jun 11 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
利用PHP+JS实现搜索自动提示(实例)
2013/06/09 PHP
php中url函数介绍及使用示例
2014/02/13 PHP
thinkphp实现面包屑导航(当前位置)例子分享
2014/05/10 PHP
PHP下的Oracle客户端扩展(OCI8)安装教程
2014/09/10 PHP
在Windows系统下使用PHP生成Word文档的教程
2015/07/03 PHP
Yii视图CGridView列表用法实例分析
2016/07/12 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
JavaScript中的事件处理
2008/01/16 Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
2009/12/04 Javascript
Javascript笔记一 js以及json基础使用说明
2010/05/22 Javascript
document.getElementById的简写方式(获取id对象的简略写法)
2010/09/10 Javascript
js实现兼容IE和FF的上下层的移动
2015/05/04 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
js canvas实现5张图片合成一张图片
2019/07/15 Javascript
使用Python编写vim插件的简单示例
2015/04/17 Python
python批量提取word内信息
2015/08/09 Python
Python IDE PyCharm的基本快捷键和配置简介
2015/11/04 Python
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
python xml解析实例详解
2016/11/14 Python
python方向键控制上下左右代码
2018/01/20 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
带病坚持工作事迹
2014/05/03 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
最新离婚协议书范本
2014/08/19 职场文书
个人融资协议书
2014/10/02 职场文书
投诉信范文
2015/07/02 职场文书
经典爱情感言
2015/08/03 职场文书