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 26 Javascript
利用jquery写的左右轮播图特效
Feb 12 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
jQuery操作元素css样式的三种方法
Jun 04 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
Jan 14 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
Sep 26 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
Sep 21 Javascript
js实现微信聊天效果
Aug 09 Javascript
输入框跟随文字内容适配宽实现示例
Aug 14 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
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
PHP随机数生成代码与使用实例分析
2011/04/08 PHP
PHP循环结构实例讲解
2014/02/10 PHP
初识PHP中的Swoole
2016/04/05 PHP
Yii2如何批量添加数据
2016/05/17 PHP
php获取文件名称和扩展名的方法
2017/02/07 PHP
老生常谈PHP中的数据结构:DS扩展
2017/07/17 PHP
laravel自定义分页效果
2017/07/23 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
PHP5.6.8连接SQL Server 2008 R2数据库常用技巧分析总结
2019/05/06 PHP
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
最新28个很棒的jQuery 教程
2011/05/28 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
JS面向对象的程序设计相关知识小结
2018/05/26 Javascript
Vue中在新窗口打开页面及Vue-router的使用
2018/06/13 Javascript
微信小程序登录时如何获取input框中的内容
2019/12/04 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
使用Python编写爬虫的基本模块及框架使用指南
2016/01/20 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
python 通过视频url获取视频的宽高方式
2019/12/10 Python
Python中的None与 NULL(即空字符)的区别详解
2020/09/24 Python
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
介绍一下linux的文件权限
2014/07/20 面试题
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
自愿离婚协议书范本
2015/01/26 职场文书
交通安全主题班会
2015/08/12 职场文书
学校体育节班级口号
2015/12/25 职场文书
python 实现mysql自动增删分区的方法
2021/04/01 Python