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 选项卡效果 新手代码
Jul 08 Javascript
js 通用javascript函数库整理
Aug 14 Javascript
JavaScript创建对象的写法
Aug 29 Javascript
网页实时显示服务器时间和javscript自运行时钟
Jun 09 Javascript
Jquery中find与each方法用法实例
Feb 04 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
浅谈Vue 初始化性能优化
Aug 31 Javascript
在vue组件中使用axios的方法
Mar 16 Javascript
开发用到的js封装方法(20种)
Oct 12 Javascript
jquery实现直播视频弹幕效果
Feb 25 jQuery
js实现点击按钮随机生成背景颜色
Sep 05 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
php目录管理函数小结
2008/09/10 PHP
PHP strtok()函数的优点分析
2010/03/02 PHP
PHP生成树的方法
2015/07/28 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2013/05/13 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
2017/09/18 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
vue和better-scroll实现列表左右联动效果详解
2019/04/29 Javascript
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
使用python 获取进程pid号的方法
2014/03/10 Python
python编写的最短路径算法
2015/03/25 Python
在windows系统中实现python3安装lxml
2016/03/23 Python
python requests使用socks5的例子
2019/07/25 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
python爬虫要用到的库总结
2020/07/28 Python
html5 迷宫游戏(碰撞检测)实例一
2013/07/25 HTML / CSS
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
德国自行车商店:Tretwerk
2019/06/21 全球购物
客户经理岗位职责
2013/12/08 职场文书
《与朱元思书》的教学反思
2014/04/17 职场文书
企业活动策划方案
2014/06/02 职场文书
党员三严三实心得体会
2014/10/13 职场文书
基层党支部整改方案
2014/10/25 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
狂人日记读书笔记
2015/06/30 职场文书
追悼会家属答谢词
2015/09/29 职场文书
SQL Server Agent 服务无法启动
2022/04/20 SQL Server