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 函数式编程
Aug 16 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
May 17 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 Javascript
jsp网页搜索结果中实现选中一行使其高亮
Feb 17 Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
vue2.0 keep-alive最佳实践
Jul 06 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
Jun 11 Javascript
node.js通过url读取文件
Oct 16 Javascript
vue使用video插件vue-video-player详解
Oct 23 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
Nov 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
php print EOF实现方法
2009/05/21 PHP
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
thinkphp5框架扩展redis类方法示例
2019/05/06 PHP
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
2015/09/14 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
JS常见算法详解
2017/02/28 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
2020/05/12 Javascript
理解JavaScript中的对象
2020/08/25 Javascript
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
Python实现的使用telnet登陆聊天室实例
2015/06/17 Python
在Python的Django框架中创建语言文件
2015/07/27 Python
python中redis的安装和使用
2016/12/04 Python
Python实现的异步代理爬虫及代理池
2017/03/17 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
C#面试题问题集
2016/04/02 面试题
公司活动邀请函
2014/01/24 职场文书
户籍证明格式
2014/09/15 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
班主任经验交流材料
2014/12/16 职场文书
乌镇导游词
2015/02/02 职场文书
公司费用报销管理制度
2015/08/04 职场文书
导游词之河北白洋淀
2020/01/15 职场文书