位置: IT常识 - 正文

跨域问题及其解决方法(JSONP&CORS)(跨域问题是什么)

编辑:rootadmin
一、什么是跨域 当a.qq.com域名下的页⾯或脚本试图去请求b.qq.com域名下的资源时,就是典型的跨域行为。跨域的定义从受限范围可以分为两种,⼴义跨域和狭义跨域。 (一)广义跨域 ⼴义跨域通常包含以下三种⾏为:1. 资源跳转:a链接、重定向。2. 资源嵌⼊:<link>、<script>、<i ... 一、什么是跨域

推荐整理分享跨域问题及其解决方法(JSONP&CORS)(跨域问题是什么),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:跨域问题的解决,跨域问题解决方案 nginx -csdn,跨域问题的解决,跨域问题解决方案 nginx -csdn,跨域问题解决方案 nginx -csdn,跨域问题解决方案前端,跨域问题解决方案,跨域问题解决方案Java,内容如对您有帮助,希望把文章链接给更多的朋友!

当a.qq.com域名下的页⾯或脚本试图去请求b.qq.com域名下的资源时,就是典型的跨域行为。跨域的定义从受限范围可以分为两种,⼴义跨域和狭义跨域。

(一)广义跨域

⼴义跨域通常包含以下三种⾏为:1. 资源跳转:a链接、重定向。2. 资源嵌⼊:<link>、<script>、<img>、<frame>等dom标签,还有样式中background:url()、@font-face()等⽂件外链。3. 脚本请求:浏览器存储数据读取、dom和js对象的跨域操作、js发起的ajax请求等。其中,资源跳转和资源嵌⼊⾏为可以正常请求到跨域资源,脚本请求在未经任何处理的情况下,通常会有跨域

(二)狭义跨域

狭义跨域正是浏览器同源策略限制的⼀类请求场景,即我们通常说的跨域⾏为,通常包含以下三种⾏为:1. cookie、localStorage和indexDB⽆法读取。2. dom和js对象⽆法获取和操作。3. ajax请求⽆法发送

二、常见的跨域场景

  浏览器安全的基石就是“同源策略”,即如果A网站设置的cookie,B网站如果想访问必须满足三个要求:同一种协议、同一个域名、同一个端口号。  举例来说,http://www.example.com/dir/page.html这个网址,协议是http://,域名是www.example.com,端口号是80(可以省略,http默认80,https默认443)  例如:

  http://www.example.com/dir2/other.html :同源

  http://example.com/dir/other.html :不同源(域名不同)  

  http://v2.www.example.com/dir/other.html :不同源(域名不同

  http://www.example.com:81/dir/other.html :不同源(端口不同)

三、跨域解决方法(一)ajax跨域请求解决方案  1.jsonp跨域解决

jsonp (JSON with Padding),是JSON的⼀种“使⽤模式”,可以让⽹页跨域读取数据。其本质是利⽤script标签的开放策略,浏览器传递callback参数到后端,后端返回数据时会将callback参数作为函数名来包裹数据,从⽽浏览器就可以跨域请求数据并定制函数来⾃动处理返回数据。

代码示例:var script = document.createElement('script');script.type = 'text/javascript';// 传参callback给后端,后端返回时执⾏这个在前端定义的回调函数script.src = 'http://a.qq.com/index.php?callback=handleCallback';document.head.appendChild(script);// 回调执⾏函数function handleCallback(res) {alert(JSON.stringify(res));}jsonp跨域优点:

jsonp兼容性强,适⽤于所有浏览器,尤其是IE10及以下浏览器。

jsonp跨域缺点:

没有关于调⽤错误的处理。只⽀持GET请求,不⽀持POST请求以及⼤数据量的请求,⽽且也⽆法拿到相关的返回头,状态码等数据。callback参数恶意注⼊,可能会造成xss漏洞。

  2.跨域资源共享(CORS)

跨域资源共享(Cross-origin resource sharing,CORS)是⼀个 W3C标准,允许浏览器向跨域服务器发送请求,从⽽克服了ajax只能同源使⽤的限制。CORS需要浏览器和服务器同时⽀持。⽬前,所有主流浏览器(IE10及以上)使⽤XMLHttpRequest对象都可⽀持该功能,IE8和IE9需要使⽤XDomainRequest对象进⾏兼容。

CORS整个通信过程都是浏览器⾃动完成,浏览器⼀旦发现ajax请求跨源,就会⾃动在头信息中增加Origin字段,⽤来说明本次请求来⾃哪个源(协议+域名+端⼝)。因此,实现CORS通信的关键是服务器,需要服务器配置Access-Control-Allow-Origin头信息。当CORS请求需要携带cookie时,需要服务端配置Access-Control-Allow-Credentials头信息,前端也需要设置withCredentials。浏览器将CORS请求分成两类:简单请求和⾮简单请求。简单请求需要满⾜以下两⼤条件:

1. 请求⽅法是以下三种⽅法之⼀:HEAD、GET、POST。2. HTTP的头信息不超出以下⼏种字段:Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain。CORS简单请求跨域实现流程:

// IE8/9需⽤XDomainRequest兼容var xhr = new XMLHttpRequest(); // 前端设置是否带cookiexhr.withCredentials = true;xhr.open('post', 'http://a.qq.com/index.php', true);xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');xhr.send('user=saramliu');xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { alert(xhr.responseText); }};CORS跨域优点:

⽀持所有类型的HTTP请求,功能完善。通过onerror事件监听进⾏调⽤错误处理;通过Access-Control-Allow-Origin进⾏资源访问授权。

CORS跨域缺点:

⽬前主流浏览器(IE10及以上)都⽀持CORS,但IE8和IE9需要使⽤XDomainRequest对象进⾏兼容,IE7及以下浏览器不⽀持

  3.服务器代理

服务器代理,顾名思义即在发送跨域请求时,后端进⾏代理中转请求⾄服务器端,然后将获取的数据返回给前端。⼀般适⽤于以下场景:

针对IE7及以下浏览器摒弃Flash插件的情况,配置代理接⼝与前端页⾯同源,并中转⽬标服务器接⼝,则ajax请求不存在跨域问题。外⽹前端页⾯⽆法访问内⽹接⼝,配置代理接⼝允许前端页⾯访问,并中转内⽹接⼝,则外⽹前端页⾯可以跨域访问内⽹接⼝。

服务器代理实现流程:

跨域问题及其解决方法(JSONP&CORS)(跨域问题是什么)

服务器代理优点:

在不使⽤Flash的情况下,兼容不⽀持CORS的浏览器跨域请求。

服务器代理缺点:

后端需要⼀定的改造⼯作量。

(⼆)前端跨域通信解决⽅案

前端跨域通信是指浏览器中两个不符合同源策略的前端页⾯进⾏通信。

  1.document.domain+iframe

document.domain+iframe⽅案代码⽰例:

<!-- A页⾯ http://a.qq.com/a.html --><iframe id="iframe" src="http://b.qq.com/b.html"></iframe><script>document.domain = "qq.com";var windowB = document.getElementById("iframe").contentWindow;alert("B页⾯的user变量:" + windowB.user);</script><!-- B页⾯ http://b.qq.com/b.html --><script>document.domain = "qq.com";var user = "saramliu";</script>document.domain+iframe⽅案优点:

实现逻辑简单,⽆需额外中转页⾯

document.domain+iframe⽅案缺点:

仅适⽤于主域相同,⼦域不同的前端通信跨域场景

  2.location.hash+iframe

当两个不符合同源策略且主域不同的页⾯需要进⾏跨域通信时,可以利⽤url的hash值改变但不刷新页⾯的特性,实现简单的前端跨域通信。

<!-- A页⾯ http://a.qq.com/a.html --><iframe id="iframe" src="http://b.qq1.com/b.html"></iframe><script> // 监听c.html传来的hash值 window.onhashchange = function () { alert("B页⾯传递数据:" + location.hash.substring(1)); };</script><!-- B页⾯ http://b.qq1.com/b.html --><iframe id="iframe" src="http://a.qq.com/c.html"></iframe><script> // 向c.html传递hash值 var iframe = document.getElementById('iframe'); setTimeout(function() { iframe.src = iframe.src + '#user=saramliu'; }, 1000);</script><!-- C页⾯ http://a.qq.com/c.html --><script> // 监听b.html传来的hash值 window.onhashchange = function () { // 操作同域a.html的hash值,传递数据 window.parent.parent.location.hash = window.location.hash.substring(1); };</script>location.hash+iframe⽅案优点

可以解决主域不同的前端通信跨域问题。hash改变,页⾯不会刷新。

location.hash+iframe⽅案缺点:

受部分浏览器安全机制限制,需要额外的同源中转页⾯,且中转页⾯需要js逻辑来修改hash值。通信数据类型及长度均受限,且数据外显在url上,存在⼀定安全风险。

  3.window.name+iframe

window.name属性的独特之处在于,name值在不同页⾯(甚⾄不同域名)加载后依旧存在,并且可以⽀持⾮常长的name值(2MB)。

window.name+iframe代码⽰例:

<!-- A页⾯ http://a.qq.com/a.html --><iframe id="iframe" src="http://b.qq1.com/b.html"></iframe><script>var state = 0;var iframe = document.getElementById('iframe');iframe.onload = function() {if (state === 1) {// 第2次onload成功后,读取同域window.name中数据alert(iframe.contentWindow.name);} else if (state === 0) {// 第1次onload成功后state = 1;}};</script><!-- B页⾯ http://b.qq1.com/b.html --><script> window.name = "这⾥是B页⾯!"; window.location = "http://a.qq.com/c.html";</script>window.name+iframe⽅案优点:

可以解决主域不同的前端通信跨域问题。通信数据类型不受限,且长度可达2MB。

window.name+iframe⽅案缺点:

需要额外的同源中转页⾯,但中转页可以为空⽩页。

  4.postMessage

postMessage是HTML5 XMLHttpRequest Level2中的API,且是为数不多可以跨域操作的window属性之⼀,它通常⽤于解决以下⽅⾯的问题:

1. 页⾯和其打开的新窗⼝的数据传递。2. 多窗⼝之间消息传递。3. 页⾯与嵌套iframe消息传递。

postMessage是⼀种安全的跨域通信⽅法。当a.html获得对b.html的window对象后,a.html调⽤postMessage⽅法分发⼀个MessageEvent消息。b.html通过监听message事件即可获取a.html传递的数据,从⽽实现跨域通信。

postMessage⽅法的语法如下:otherWindow.postMessage(message、targetOrigin、[transfer])

otherWindow:⽬标窗⼝的window对象,⽐如iframe的contentWindow属性、执⾏window.open返回的window对象等。

message:将要发送给其他window的数据。

targetOrigin:指定哪些窗⼝能接收到消息事件,其值可以是字符串*(表⽰⽆限制)或者是“协议+主机+端⼝号”。

transfer(可选):是⼀串和message同时传递的Transferable对象,这些对象的所有权将被转移给消息的接收⽅,⽽发送⼀⽅将不再保有所有权。

postMessage⽅案代码⽰例:

<!-- A页⾯ http://a.qq.com/a.html --><iframe id="iframe" src="http://b.qq1.com/b.html"></iframe><script> var iframe = document.getElementById('iframe'); iframe.onload = function() { var data = {meesage: "这⾥是A页⾯发的消息"}; var url = "http://b.qq1.com/b.html"; // 向B页⾯发送消息 iframe.contentWindow.postMessage(JSON.stringify(data), url); }; window.addEventListener("message", function(e) { alert("B页⾯发来消息:" + JSON.parse(e.data)); });</script><!-- B页⾯ http://b.qq1.com/b.html --><script> window.addEventListener("message", function(e) { alert("A页⾯发来消息:" + JSON.parse(e.data)); var data = {meesage: "这⾥是B页⾯发的消息"}; var url = "http://a.qq.com/a.html"; window.parent.postMessage(JSON.stringify(data), url); }, false);</script>postMessage⽅案优点:

可以解决多种类型的前端跨域通信问题;

postMessage⽅案缺点:

兼容性⽅⾯相对差⼀点,IE8及以下浏览器不⽀持该⽅法,IE9只⽀持postMessage传递string类型的数据,⽽标准的postMessage消息数据可以是任何类型。

本文链接地址:https://www.jiuchutong.com/zhishi/304777.html 转载请保留说明!

上一篇:elementui中表格多选+分页,保存所有选中数据(elementui的表格)

下一篇:双语 | 电影史上最浪漫台词 哪一句最打动你?(史上伟大电影)

  • 集体房屋出租管理办法
  • 出售交易性金融资产发生的净损失应计入营业外支出
  • 实收款比应收账款少3万怎么处理
  • 企业注销,账面余额怎样调账
  • 个体工商户税种认定
  • 起重机属于固定资产哪个类别
  • 减免企业所得税怎么算
  • 境外所得抵免限额小于实际缴纳
  • 软件销售利润
  • 代收款是什么套路
  • 按季度支付贷款利息权责发生制
  • 发票认证延期抵扣啥意思
  • 转让实物资产税务处理
  • 企业公益金账务的会计处理怎么做
  • 不按出资比例取得分红怎么纳税?
  • 年初未分配利润借方增加还是减少
  • 代扣代缴手续费返还需要缴纳增值税吗
  • 公司比赛规则
  • 闲置的房屋可以计提折旧吗
  • 在企业走账扣的税点钱如何做账?
  • 可供出售金融资产新准则叫什么
  • 资产评估溢价部分如何处理?
  • 电子发票怎么冲红字
  • 收益性支出包括哪些科目
  • 已知不含税金额和增值税如何计算税率
  • 发工资时忘记扣个税了怎么做账
  • 计提法定盈余公积分录并结转
  • 合并报表同一控制下和非同一控制下区别
  • win11怎么用win10界面
  • php中数组的常用函数及用法
  • mac教程视频
  • 补丁自动过期怎么解决
  • php快速查找
  • 结转待抵扣
  • dotnetfx2.0
  • php关闭报错
  • 资产负债表申报怎么填
  • 什么是AI工具
  • cnn数据集
  • 微调是调哪里
  • php 压缩文件
  • 应收账款收不回来的情况说明
  • 办理完税证明需要什么资料
  • 增值税附加税减免政策2022年
  • 微信收款怎么做会计分录
  • 员工办理健康证需要什么材料
  • 存根联是自己留着吗
  • python如何实现事务机制
  • 担保公司代偿会上征信嘛
  • 个人所得税年底退税 可以退多少
  • 实收资本核算有哪些要求
  • 高新企业申请流程
  • 现金流量表直接法的优缺点
  • mysql常用命令语句
  • 资产负债表与利润表的关联性可在存货与销售成本
  • 商品损耗进项税额怎么算
  • 工会活动购买的产品
  • 应收应付账款统计表
  • 收据和收款收据的法律效力
  • mysql开源社区
  • win8升级win10系统会卡吗
  • win7系统有wifi功能吗
  • win7系统锁屏密码
  • linux安装gdb命令
  • 怎么删除windows7
  • windows8 应用商店
  • win8.1系统安装
  • Android游戏开发读后感
  • opengl程序
  • 详解16型人格
  • perl使用保留字引用什么模块
  • javascript cookies
  • shell函数写法
  • javascript什么用
  • 拨号器怎么用
  • shell删除指定内容
  • JavaScript基础教程
  • 谷歌的全球化发展战略
  • 江西省电子税务局公众查询
  • 国际税收管理处忙不忙
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设