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中的Location地址对象
Jan 16 Javascript
JavaScript中的排序算法代码
Feb 22 Javascript
jquery动态加载select下拉框示例代码
Dec 10 Javascript
jquery数组之存放checkbox全选值示例代码
Dec 20 Javascript
18个非常棒的jQuery代码片段
Nov 02 Javascript
jQuery简单获取键盘事件的方法
Jan 22 Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 Javascript
Bootstrap php制作动态分页标签
Dec 23 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
layui 监听表格复选框选中值的方法
Aug 15 Javascript
layUI的验证码功能及校验实例
Oct 25 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中使用cURL实现Get和Post请求的方法
2013/03/13 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
JS模拟面向对象全解(一、类型及传递)
2011/07/13 Javascript
js控制的遮罩层实例介绍
2013/05/29 Javascript
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
JS实现图片高亮展示效果实例
2015/11/24 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
vue-cli如何添加less 以及sass
2017/07/06 Javascript
iframe高度自适应及隐藏滚动条的实例详解
2017/09/29 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
2019/05/07 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
vue自定义正在加载动画的例子
2019/11/14 Javascript
JS实现关闭小广告特效
2021/01/29 Javascript
vue项目创建步骤及路由router
2020/01/14 Javascript
关于小程序优化的一些建议(小结)
2020/12/10 Javascript
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
Python将json文件写入ES数据库的方法
2019/04/10 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
Html5与App的通讯方式详解
2019/10/24 HTML / CSS
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
GWT的应用有哪两种部署模式
2012/12/21 面试题
公司保密承诺书
2014/03/27 职场文书
保护野生动物倡议书
2014/05/16 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
师德师风剖析材料
2014/09/30 职场文书
感恩教师节主题班会
2015/08/12 职场文书
2016年先进教师个人事迹材料
2016/02/26 职场文书