位置: 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的表格)

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

  • iphone14和13区别是什么?(苹果14和13的区别)

    iphone14和13区别是什么?(苹果14和13的区别)

  • ip地址怎么查找(ipdizhi)(监控ip地址怎么查找)

    ip地址怎么查找(ipdizhi)(监控ip地址怎么查找)

  • 黑鲨4s怎么设置肩键(黑鲨4s怎么设置黑白模式)

    黑鲨4s怎么设置肩键(黑鲨4s怎么设置黑白模式)

  • 如何进入安全模式(如何进入安全模式杀毒)

    如何进入安全模式(如何进入安全模式杀毒)

  • 抖音可以合成几个红包(抖音可以合成几次)

    抖音可以合成几个红包(抖音可以合成几次)

  • ipad激活时一定要选取备份吗(ipad要怎么激活)

    ipad激活时一定要选取备份吗(ipad要怎么激活)

  • mfi是什么(mfi是什么单位)

    mfi是什么(mfi是什么单位)

  • 华为p40的HD怎么关(华为p40的hd哪里设置)

    华为p40的HD怎么关(华为p40的hd哪里设置)

  • 复制活动窗口到剪切板快捷键(复制活动窗口到word)

    复制活动窗口到剪切板快捷键(复制活动窗口到word)

  • 电子书怎么下载到kindle(电子书怎么下载阅读免费)

    电子书怎么下载到kindle(电子书怎么下载阅读免费)

  • 如何注销粉象账号(怎么注销粉象生活)

    如何注销粉象账号(怎么注销粉象生活)

  • 佳明手表充电注意事项(佳明手表充电的时候没有指示灯)

    佳明手表充电注意事项(佳明手表充电的时候没有指示灯)

  • 静态ram和动态ram区别(ram分为静态ram和动态ram)

    静态ram和动态ram区别(ram分为静态ram和动态ram)

  • 快手互粉对账号有影响吗(快手互粉影响权重吗)

    快手互粉对账号有影响吗(快手互粉影响权重吗)

  • 苹果扩容后有什么影响(苹果扩容后有什么变化)

    苹果扩容后有什么影响(苹果扩容后有什么变化)

  • 坚果g7s与g7的区别(坚果g7s好还是g7pro好)

    坚果g7s与g7的区别(坚果g7s好还是g7pro好)

  • 如何设置热点连接人数(如何设置热点连接网络)

    如何设置热点连接人数(如何设置热点连接网络)

  • 华为手机丢了如何定位查找(华为手机丢了如何锁定手机)

    华为手机丢了如何定位查找(华为手机丢了如何锁定手机)

  • ttf字体怎么使用(ttf字体怎么修改字体大小)

    ttf字体怎么使用(ttf字体怎么修改字体大小)

  • 拼多多好友删除还能加上吗(拼多多好友删除了还能找回来吗)

    拼多多好友删除还能加上吗(拼多多好友删除了还能找回来吗)

  • word怎么设置背景(word怎么设置背景图)

    word怎么设置背景(word怎么设置背景图)

  • 公众平台修改登录邮箱方法(公众号修改登录密码怎么修改)

    公众平台修改登录邮箱方法(公众号修改登录密码怎么修改)

  • 苹果6p触摸屏失灵(iphone6触摸屏失灵修复小技巧)

    苹果6p触摸屏失灵(iphone6触摸屏失灵修复小技巧)

  • 猪八戒网如何取消任务(猪八戒网怎么注销)

    猪八戒网如何取消任务(猪八戒网怎么注销)

  • 58同城如何发布租房信息(58同城如何发布广告)

    58同城如何发布租房信息(58同城如何发布广告)

  • 房产税一律按房产价值计征
  • 小规模应税行为扣除额如何填
  • 代建费用在哪里列支
  • 总账套打
  • 房地产开发公司排名
  • 存货被盗的会计分录
  • 个体工商户可以给自己交五险一金吗
  • 个税申报错了并且已经缴款怎么修改
  • 发票上盖了老税号怎么办
  • 2019年新政府会计制度
  • 小规模季度不超过30万元免税会计分录
  • 普通增值税发票税号
  • 不开发票的入账怎么办?
  • 金税盘全额抵扣申报流程
  • 公司报销费用发票怎么开
  • 股息红利税补缴什么意思
  • 材料验收入库款项尚未支付
  • 所得税汇算清缴账务处理
  • 交通运输业安全员证
  • 商品流通企业的资金循环
  • 承兑汇票承兑流程
  • 三证合一后怎么看税号
  • 酒店更换地毯的请示
  • 没有产权的房子可以公证吗
  • 记帐凭证怎么制作的
  • 企业所得税减免政策
  • 家具螺丝螺母一般在哪里卖
  • 增值税减免算什么费用
  • windows刷新桌面
  • 支付挂靠方的管理费用有进项吗?
  • framework7教程
  • 广告费和业务宣传费税前扣除基数
  • 集团与子公司资产的关系
  • 固定资产折旧需要减去减值准备吗
  • vue 动态组件
  • pytorch技巧
  • thinkphp框架设计原理
  • mdadm命令详解
  • 发票报销入账
  • 拨入专款年终如何做账
  • 汽车抵押贷款会上征信吗
  • 上市公司发行股票会计分录
  • 建筑公司劳务发票
  • poi java 导入导出
  • 安装使用漏电保护器是属于哪种安全措施
  • mongodb基础知识
  • 小规模不动产租赁要交哪些税
  • 税收类型增值税有哪些
  • 将自产产品用于公益事业
  • 企业信用公示的时候医疗和生育怎么分开计算
  • 成品油办法废止后,加油站还需办理成品油许可证吗
  • 计提附加税费是什么意思
  • 应收账款多久收不回来作为坏账
  • 收到票据又转背书付了账务处理
  • 哪些发票可以提供发票
  • 自制半成品销售方案
  • 银行存款利息记账凭证
  • 收到汇算清缴后怎么做账
  • 防御sql注入的方法有哪几种
  • 数据库高并发怎么解决
  • 安装linux出现grub的原因
  • win7系统怎么加入工作组
  • 微信小程序wx.request实现后台数据交互功能分析
  • jquery插件大全
  • 批处理 dp0
  • 用python循环语句
  • cocos2d::Vector
  • shell入门
  • 简述python语言
  • 详解各种汽油一吨等于多少升
  • 怎么用js实现滑动效果
  • 安卓实现代理
  • android 入门教程
  • javascript+
  • 小规模纳税人进口环节的增值税税率
  • 沈阳车辆税务管理局电话
  • 电子税务局企业账号是税号吗
  • 上海增值税怎么报税流程
  • 漏报原因
  • 河南省纳税服务平台
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设