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 相关文章推荐
小议Function.apply() 之一------(函数的劫持与对象的复制)
Nov 30 Javascript
JQuery对id中含有特殊字符的转义处理示例
Sep 06 Javascript
javascript右下角弹层及自动隐藏(自己编写)
Nov 20 Javascript
jQuery中阻止冒泡事件的方法介绍
Apr 12 Javascript
node.js操作mysql(增删改查)
Jul 24 Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 Javascript
React Native 截屏组件的示例代码
Dec 06 Javascript
js的各种数据类型判断的介绍
Jan 19 Javascript
vue滚动tab跟随切换效果
Jun 29 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
Nov 04 Javascript
vue实现购物车功能(商品分类)
Apr 20 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 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实现递归循环每一个目录
2010/08/08 PHP
php Smarty初体验二 获取配置信息
2011/08/08 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
Zend Framework教程之Zend_Registry对象用法分析
2016/03/22 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
优化javascript的执行速度
2010/01/23 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
带左右箭头图片轮播的JS代码
2013/12/18 Javascript
jquery解析JSON数据示例代码
2014/03/17 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
jQuery实现获取动态添加的标签对象示例
2018/06/28 jQuery
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
如何使用puppet替换文件中的string
2018/12/06 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
python读取word文档的方法
2015/05/09 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
Python实战之制作天气查询软件
2019/05/14 Python
python selenium操作cookie的实现
2020/03/18 Python
Django models文件模型变更错误解决
2020/05/11 Python
学习python需要有编程基础吗
2020/06/02 Python
如何使用Pytorch搭建模型
2020/10/26 Python
TCP/IP模型的分界线
2012/12/01 面试题
Java语言的优势
2015/01/10 面试题
八项规定整改措施
2014/02/12 职场文书
幼儿园安全责任书
2014/04/14 职场文书
致共产党员倡议书
2014/04/16 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
务虚会发言材料
2014/12/25 职场文书
初中优秀学生评语
2014/12/29 职场文书
Mysql使用全文索引(FullText index)的实例代码
2022/04/03 MySQL