JS跨域请求的问题解析


Posted in Javascript onDecember 03, 2018

同源策略

在运行中我们有时会出错是因为我们违反了同源策略,这是一种浏览器所实施的安全措施,用于限制具有不同来源的文档之间的交互。页面的来源由其协议,主机和端口号定义。具有相同来源的资源可以相互完全访问。但是如果具有不相同的源将会拒绝访问。

http://www.a.com/a.js 
http://www.b.com/a.js 
这两个之间就不可以互相访问,因为域名的不相同

域名组成

JS跨域请求的问题解析

如果上面两个域名想互相访问就需要跨域请求,一般情况下同源政策规定:允许跨源 写入,而不允许跨源 读取这意味着同源政策不会阻止将数据写入,只会禁止他们从域中读取数据, 或者对从其域收到的响应做任何事情。

跨域请求的方法

JSONP

JSONP 称为带有填充的JavaScript对象表示,是一种通过利用HTML页面中的脚本标记可以来加载来自不同来源的代码来执实现跨域请求的方法。JSONP依赖于<script>标签可以来自不同来源的事实。当浏览器解析<script>标记时,它将获取脚本内容,并在当前页面的上下文中执行它。通常,服务将返回HTML或以XML或JSON等数据格式表示的某些数据。但是,当向启用JSONP的服务器发出请求时,它会返回一个脚本块,该脚本块在执行时会调用页面指定的回调函数,并将实际数据作为参数提供

注意:它没有相同的源点限制,即使在旧浏览器中也具有良好的兼容性但是JSONP只能用于执行跨域GET请求,服务器必须显式支持JSONP请求。

JS跨域请求的问题解析

CORS方法

为服务器提供了一种机制,告诉浏览器可以请求域A读取来自域B的数据。通过在响应中包含一个新的 Access-Control-Allow-OriginHTTP头来完成的,当浏览器收到来自跨源源的响应时,它将检查CORS头。如果响应头中指定的源点与当前源点相匹配,则允许对响应进行读访问,否则就会报错。

与jsonp相比,CORS具有以下优势:

它不仅支持GET请求,还支持POST等其他请求

它可以使用XMLHttpRequest发送和接收数据,并具有更好的错误处理机制

JS跨域请求的问题解析

总结:以上就是本篇文章的全部内容了,希望对大家学习有所帮助,感谢大家对三水点靠木的支持。

Javascript 相关文章推荐
使用IE的地址栏来辅助调试Web页脚本
Mar 08 Javascript
jquery tab标签页的制作
May 10 Javascript
js 可拖动列表实现代码
Dec 13 Javascript
js中数组(Array)的排序(sort)注意事项说明
Jan 24 Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 Javascript
拖动时防止选中
Feb 03 Javascript
babel基本使用详解
Feb 17 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
微信小程序开发(一):服务器获取数据列表渲染操作示例
Jun 01 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 Javascript
vue实现简单数据双向绑定
Apr 28 Vue.js
VueJS 组件参数名命名与组件属性转化问题
Dec 03 #Javascript
Vue.Draggable拖拽功能的配置使用方法
Jul 29 #Javascript
小程序实现授权登陆的解决方案
Dec 02 #Javascript
mpvue 单文件页面配置详解
Dec 02 #Javascript
Vuejs监听vuex中值的变化的方法示例
Dec 02 #Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
Dec 02 #Javascript
在移动端使用vue-router和keep-alive的方法示例
Dec 02 #Javascript
You might like
PHP URL路由类实例
2013/11/12 PHP
分享php邮件管理器源码
2016/01/06 PHP
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
jQuery 表单验证扩展代码(二)
2010/10/20 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
vue keep-alive请求数据的方法示例
2018/05/16 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
2019/05/16 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
js实现飞机大战小游戏
2020/08/26 Javascript
详解javascript脚本何时会被执行
2021/02/05 Javascript
python函数参数*args**kwargs用法实例
2013/12/04 Python
Python类方法__init__和__del__构造、析构过程分析
2015/03/06 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
Python处理PDF与CDF实例
2020/02/26 Python
使用matlab 判断两个矩阵是否相等的实例
2020/05/11 Python
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
2017/08/18 HTML / CSS
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
Nike比利时官网:Nike.com (BE)
2019/02/07 全球购物
在印度上传处方,在线订购药品:Medlife
2019/03/28 全球购物
介绍一下游标
2012/01/10 面试题
清明节演讲稿
2014/05/27 职场文书
交通安全责任书范本
2014/07/24 职场文书
土地转让协议书
2014/09/27 职场文书
离职告别感言
2015/08/04 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
感恩信:写给爸爸妈妈的一封感谢信
2019/09/12 职场文书
详解Django的MVT设计模式
2021/04/29 Python
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS