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作者John Resig自己封装的javascript 常用函数
Nov 09 Javascript
juqery 学习之三 选择器 可见性 元素属性
Nov 25 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
JavaScript针对网页节点的增删改查用法实例
Feb 02 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
微信小程序 swiper组件轮播图详解及实例
Nov 16 Javascript
关于Javascript中document.cookie的使用
Mar 08 Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 Javascript
基于angular实现模拟微信小程序swiper组件
Jun 11 Javascript
将 vue 生成的 js 上传到七牛的实例
Jul 28 Javascript
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
Java Varargs 可变参数用法详解
Jan 28 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 intval的测试代码发现问题
2008/07/27 PHP
CI框架给视图添加动态数据
2014/12/01 PHP
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
JavaScript CSS菜单功能 改进版
2008/12/20 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
js的回调函数详解
2015/01/05 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
2017/02/15 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
Js自定义多选框效果的实例代码
2017/07/05 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
2018/12/13 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
Python 命令行参数sys.argv
2008/09/06 Python
python实现逐个读取txt字符并修改
2018/12/24 Python
用django设置session过期时间的方法解析
2019/08/05 Python
python计算无向图节点度的实例代码
2019/11/22 Python
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
群众路线教育实践活动的心得体会
2014/09/03 职场文书
领导干部遵守党的政治纪律情况思想汇报
2014/09/14 职场文书
2014年个人年终总结
2015/03/09 职场文书
护理培训心得体会
2016/01/22 职场文书
《废话连篇——致新手》——chinapizza
2022/04/05 无线电
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS