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 相关文章推荐
Add a Formatted Table to a Word Document
Jun 15 Javascript
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
Nov 23 Javascript
JavaScript 小型打飞机游戏实现原理说明
Oct 28 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
Javascript Event(事件)的传播与冒泡
Jan 23 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
vue结合Echarts实现点击高亮效果的示例
Mar 17 Javascript
详解Vue单元测试case写法
May 24 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 Javascript
使用preload预加载页面资源时注意事项
Feb 03 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面向对象全攻略 (一) 面向对象基础知识
2009/09/30 PHP
PHP文件操作实现代码分享
2011/09/01 PHP
基于PHP读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
YII路径的用法总结
2014/07/09 PHP
C#静态方法与非静态方法实例分析
2014/09/22 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
flexigrid 参数说明
2010/11/23 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
AngularJS ng-change 指令的详解及简单实例
2016/07/30 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
python3 模拟登录v2ex实例讲解
2017/07/13 Python
python使用socket创建tcp服务器和客户端
2018/04/12 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
对PyQt5基本窗口控件 QMainWindow的使用详解
2019/06/19 Python
Python坐标轴操作及设置代码实例
2020/06/04 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
python中逻辑与或(and、or)和按位与或异或(&amp;、|、^)区别
2020/08/05 Python
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
学校岗位设置方案
2014/01/16 职场文书
植树节口号
2014/06/21 职场文书
机械电子工程专业求职信
2014/06/22 职场文书
食品安全演讲稿
2014/09/01 职场文书
2015年党员自评材料
2014/12/17 职场文书
致青春观后感
2015/06/09 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
写给医护人员的一封感谢信
2019/09/16 职场文书
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python