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同意等待代码实现心得
Jan 01 Javascript
JavaScript获取表单enctype属性的方法
Apr 02 Javascript
javascript实现动态标签云
Oct 16 Javascript
走进AngularJs之过滤器(filter)详解
Feb 17 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
JavaScript 用fetch 实现异步下载文件功能
Jul 21 Javascript
JavaScript实现短信倒计时60s
Oct 09 Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
Jan 21 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 Javascript
JavaScript TAB栏切换效果的示例
Nov 05 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简单静态页生成过程
2008/03/27 PHP
隐性调用php程序的方法
2009/03/09 PHP
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
php获取新浪微博数据API实例
2013/11/12 PHP
采用memcache在web集群中实现session的同步会话
2014/07/05 PHP
php实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
php curl 模拟登录并获取数据实例详解
2016/12/22 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
javascript 动态加载 css 方法总结
2009/07/11 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
Vue组件通信的几种实现方法
2019/04/25 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
vue实现移动端触屏拖拽功能
2020/08/21 Javascript
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
[52:39]完美世界DOTA2联赛PWL S3 CPG vs Forest 第一场 12.16
2020/12/17 DOTA
Python list操作用法总结
2015/11/10 Python
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
Python中的元组介绍
2019/01/28 Python
python如何实现视频转代码视频
2019/06/17 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
Python面向对象中类(class)的简单理解与用法分析
2020/02/21 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
美国校服网上商店:French Toast
2019/10/08 全球购物
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
大队干部竞选演讲稿
2014/04/28 职场文书
党委干部批评与自我批评发言稿
2014/09/28 职场文书
医德医风个人工作总结2014
2014/11/14 职场文书
2015年度护士个人工作总结
2015/04/09 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
mysql全面解析json/数组
2022/07/07 MySQL