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 相关文章推荐
IE不出现Flash激活框的小发现的js实现方法
Sep 07 Javascript
JavaScript 对象模型 执行模型
Dec 06 Javascript
Javascript的时间戳和php的时间戳转换注意事项
Apr 12 Javascript
简单的ajax连接库分享(不用jquery的ajax)
Jan 19 Javascript
JavaScript中实现异步编程模式的4种方法
Sep 24 Javascript
javascript面向对象之对象的深入理解
Jan 13 Javascript
VUE多层路由嵌套实现代码
May 15 Javascript
JS实现的找零张数最小问题示例
Nov 28 Javascript
浅析前端路由简介以及vue-router实现原理
Jun 01 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
vue实现固定位置显示功能
May 30 Javascript
JavaScript实现音乐导航效果
Nov 19 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
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
JSON JQUERY模板实现说明
2010/07/03 Javascript
dess中一个简单的多路委托的实现
2010/07/20 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
JavaScript自动设置IFrame高度的小例子
2013/06/08 Javascript
js实现在字符串中提取数字
2013/11/05 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
jquery实现点击消失的代码
2014/03/03 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
JS常用函数使用指南
2014/11/23 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
详解Vue中一种简易路由传参办法
2017/09/15 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
2018/04/12 jQuery
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
vue开发移动端底部导航条功能
2020/04/08 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
[00:12]DAC2018 Miracle-站上中单舞台,他能否再写奇迹?
2018/04/06 DOTA
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
django实现将修改好的新模型写入数据库
2020/03/31 Python
使用python实现微信小程序自动签到功能
2020/04/27 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
python 制作本地应用搜索工具
2021/02/27 Python
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
木马的传播途径主要有哪些
2016/04/08 面试题
机械制造专业毕业生求职信
2014/03/02 职场文书
关于青春的演讲稿
2014/05/05 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
个人学习党的群众路线教育实践活动心得体会
2014/11/05 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js
Python基础教程,Python入门教程(超详细)
2021/06/24 Python