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 相关文章推荐
js 单引号 传递方法
Jun 22 Javascript
Javascript学习笔记9 prototype封装继承
Jan 11 Javascript
JS增加行复制行删除行的实现代码
Nov 09 Javascript
Java/JS获取flash高宽的具体方法
Dec 27 Javascript
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
使用VS开发 Node.js指南
Jan 06 Javascript
JS解析XML实例分析
Jan 30 Javascript
JQuery解析XML数据的几个简单实例
May 18 Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 Javascript
vscode中vue-cli项目es-lint的配置方法
Jul 30 Javascript
vue使用i18n实现国际化的方法详解
Sep 05 Javascript
JS实现网页时钟特效
Mar 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 程式大小
2006/12/06 PHP
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
WordPress中Gravatar头像缓存到本地及相关优化的技巧
2015/12/19 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
jQuery 拖动层(在可视区域范围内)
2012/05/24 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
微信小程序 教程之wxapp 视图容器 view
2016/10/19 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
js中DOM事件绑定分析
2018/03/18 Javascript
js replace替换字符串同时替换多个方法
2018/11/27 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
2019/04/26 Javascript
VUE脚手架具体使用方法
2019/05/20 Javascript
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
[52:02]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第二场 2月26日
2021/03/11 DOTA
python创建关联数组(字典)的方法
2015/05/04 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
Django的Modelforms用法简介
2019/07/27 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
python 求两个向量的顺时针夹角操作
2021/03/04 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
会计学专业学生的求职信范文
2014/01/27 职场文书
廉洁自律演讲稿
2014/05/22 职场文书
办公室个人总结
2015/02/28 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书
《仙剑客栈2》第一弹正式宣传片公开 年内发售
2022/04/07 其他游戏
Redis 异步机制
2022/05/15 Redis