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 相关文章推荐
javascript 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
javascript为下拉列表动态添加数据项
May 23 Javascript
jQuery中Form相关知识汇总
Jan 06 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 Javascript
JavaScript中三种常见的排序方法
Feb 24 Javascript
vue-cli如何快速构建vue项目
Apr 26 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
May 24 Javascript
微信用户访问小程序的登录过程详解
Sep 20 Javascript
javascript canvas时钟模拟器
Jul 13 Javascript
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
Apr 09 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
天使彦史上最神还原,性别曝光的那一刻,百万网友恋爱了
2020/03/02 国漫
php+oracle 分页类
2006/10/09 PHP
php的declare控制符和ticks教程(附示例)
2014/03/21 PHP
php从数组中随机选择若干不重复元素的方法
2015/03/14 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
javascript合并表格单元格实例代码
2016/01/03 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
requireJS使用指南
2016/04/27 Javascript
详解nodejs 文本操作模块-fs模块(三)
2016/12/22 NodeJs
浅谈js中的this问题
2017/08/31 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
2018/04/18 jQuery
Bootstrap Paginator+PageHelper实现分页效果
2018/12/29 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
在MAC上搭建python数据分析开发环境
2016/01/26 Python
Python绘制七段数码管实例代码
2017/12/20 Python
Python爬虫爬取煎蛋网图片代码实例
2019/12/16 Python
瑞典最好的运动鞋专卖店:Sneakersnstuff
2016/08/29 全球购物
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
Linux面试题LINUX系统类
2014/11/19 面试题
求职简历的自我评价怎样写好
2013/10/07 职场文书
英语自荐信范文
2013/12/11 职场文书
工程招投标邀请书
2014/01/26 职场文书
五年后的职业生涯规划
2014/03/04 职场文书
四查四看整改措施
2014/09/19 职场文书
领导班子四风对照检查材料
2014/09/23 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python
golang为什么要统一错误处理
2022/04/03 Golang
《吸血鬼:避世 血猎》官宣4.27发售 系列首款大逃杀
2022/04/03 其他游戏