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 相关文章推荐
事件冒泡是什么如何用jquery阻止事件冒泡
Mar 20 Javascript
判断ie的两种简单方法
Aug 12 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
Sep 22 Javascript
JavaScript中的字符串操作详解
Nov 12 Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 Javascript
解决vue 引入子组件报错的问题
Sep 06 Javascript
基于Koa2写个脚手架模拟接口服务的方法
Nov 27 Javascript
浅谈JS中this在各个场景下的指向
Aug 14 Javascript
vue中使用v-model完成组件间的通信
Aug 22 Javascript
vue中@change兼容问题详解
Oct 25 Javascript
Vue如何使用混合Mixins和插件开发详解
Feb 05 Javascript
vue设置全局访问接口API地址操作
Aug 14 Javascript
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
SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享
2011/04/18 PHP
数组与类使用PHP的可变变量名需要的注意的问题
2013/06/20 PHP
快速排序 php与javascript的不同之处
2011/02/22 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
JS画5角星方法介绍
2013/09/17 Javascript
Node.js的包详细介绍
2015/01/14 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
bootstrap多种样式进度条展示
2016/12/20 Javascript
快速实现jQuery多级菜单效果
2017/02/01 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
Node.js实现发送邮件功能
2017/11/06 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
了解JavaScript中let语句
2019/05/30 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python3+PyQt5自定义视图详解
2018/04/24 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
python GUI库图形界面开发之PyQt5树形结构控件QTreeWidget详细使用方法与实例
2020/03/02 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
html5画布旋转效果示例
2014/01/27 HTML / CSS
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
面料业务员岗位职责
2013/12/26 职场文书
养殖行业的创业计划书
2014/01/05 职场文书
孝老爱亲模范事迹材料
2014/05/25 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
2015年招生工作总结
2015/05/04 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python
使用Pytorch训练two-head网络的操作
2021/05/28 Python
Java基础之详解HashSet的使用方法
2021/06/30 Java/Android
el-table-column 内容不自动换行的解决方法
2022/08/14 Vue.js