出于浏览器的同源策略,我们经常会遇到浏览器跨域的问题。

简单的说跨域基本解决方案是:

  • GET请求用JSONP
  • 其他请求用同源iframe做代理

JSONP的介绍很多,这里就不多说了。

而同源iframe做代理主要是主窗口与iframe的通讯问题,因为这里也有同源策略。常见的方法是使用window.name或者通过url param来通讯。但这些方法都需要反复加载iframe来完成的,资源消耗较高,有没有更好的方案呢?

window.postMessage

window.postMessage最早由IE8引入,主要为了解决跨文档通讯问题,以下使其支持列表:

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 6.0 (6.0) [1] [4] 8.0 [2] [3] 9.5 4.0
transfer argument ? 20.0 (20.0) Not supported ? ?
otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow:目标窗口,是 window.frames 属性的成员或者由 window.open 方法创建的窗口

  • message: 要发送的消息,类型为 String、Object (IE8、9 不支持)
  • targetOrigin: 限定消息接收范围,不限制请使用 ‘*’

message事件

再通过绑定该窗口的message事件,来获取信息,例如:

window.addEventListener('message', function(event) {console.log(event.data);
},false);

跨非同源文档通讯

这给我们提供了一种跨非同源文档通讯方案。这里有一个简单的例子:

http://html5demos.com/postmessage2

方案基本原理

基本原理现在就比较清晰了,我们依然使用同源iframe做代理,但是主页面与iframe的通讯方式是利用postMessage实现的。

现成方案

如果你已经只为IE8以上浏览器用户服务了(国外项目基本已经将IE6、7淘汰了),而且你不想处理这些兼容性问题,那么你可以选用下面老外实现的现成方案:

https://github.com/jpillora/xdomain

你可能不知道的跨域解决方案相关推荐

  1. kuayu react_react跨域解决方案

    react跨域解决方案 1.开发环境:react+axios+element 2.电脑系统:windows10专业版 3.在使用react开发的过程中,我们总是会遇到跨域的问题,下面我来分享一下,在r ...

  2. 跨域解决方案(史上最易懂)

    跨域总结 1.跨域思路 跨域解决方案一般分为两种:前端解决,后端解决 1.1 前端解决方案 通过前端解决的思想就是,通过设置中间件把跨域的请求转发一下,其实就是反向代理, 比如 http://1.2. ...

  3. Atitit.js跨域解决方案attilax大总结 后台java php c#.net的CORS支持

    Atitit.js跨域解决方案attilax大总结 后台java php c#.net的CORS支持 1.设置 document.domain为一致  推荐1 2.Apache 反向代理 推荐1 3. ...

  4. 跨域解决方案一:使用CORS实现跨域

    跨域解决方案一:使用CORS实现跨域 参考文章: (1)跨域解决方案一:使用CORS实现跨域 (2)https://www.cnblogs.com/choon/p/5386150.html (3)ht ...

  5. Mac上Chrome浏览器跨域解决方案

    Mac上Chrome浏览器跨域解决方案 参考文章: (1)Mac上Chrome浏览器跨域解决方案 (2)https://www.cnblogs.com/dxzg/p/9707639.html 备忘一下 ...

  6. localStorage和cookie的跨域解决方案

    localStorage和cookie的跨域解决方案 参考文章: (1)localStorage和cookie的跨域解决方案 (2)https://www.cnblogs.com/vsmart/p/9 ...

  7. html 跨域_常见跨域解决方案以及Ocelot 跨域配置

    常见跨域解决方案以及Ocelot 跨域配置 Intro 我们在使用前后端分离的模式进行开发的时候,如果前端项目和api项目不是一个域名下往往会有跨域问题.今天来介绍一下我们在Ocelot网关配置的跨域 ...

  8. WEB 前端跨域解决方案

    跨域定义 广义的定义:跨域是指一个域下的文档或脚本试图去请求另一个域下的资源. 1.) 资源跳转: 链接.重定向.表单提交 2.) 资源嵌入: <link>.<script>. ...

  9. 【安全系列之跨域】跨域解决方案

    一.为什么会出现跨域问题 出于浏览器的同源策略限制.同源策略是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS.CS ...

最新文章

  1. 实现SSTab单个选项卡代码
  2. 学生计算机屏幕坏了怎么办,如果计算机显示器的屏幕坏了怎么办?
  3. django language_Python+Django— 入门通关(三)| admin:后台管理界面
  4. 《死亡笔记》等书遭禁 北京全市封杀“鬼故事”
  5. fragment嵌套,viewpager嵌套 不能正确显示
  6. [前端漫谈] 做一个四则计算器
  7. Android应用程序创建桌面快捷方式
  8. Atitit.web ui  组件化 vs  mvc
  9. 淘宝双十一火爆下的暗礁?
  10. 国有数据要素市场的政策红利,你get 到了吗?
  11. ffmpeg录制音频 命令行与C++实现
  12. php mysql webim_webim(icomet) 使用
  13. 海龟python词树_python海龟画树
  14. 验证码之google的reCAPTCHA使用
  15. 家庭NAS服务器(1)服务器的配置与选择
  16. 百度知道与搜搜问问推广的优劣势
  17. 常见的中成药神奇疗效
  18. API勾取实现进程隐藏
  19. 论文:回声消除中的LMS和NLMS算法与MATLAB实现
  20. linux查看msf安装目录,Ubuntu下安装Metasploit和Linux命令大全

热门文章

  1. 用CSS3 vh 简单实现DIV全屏居中
  2. day9-Python学习笔记(二十)数据库备份,修改父类的方法
  3. 新单词 part 4
  4. [Vijos 1143]三取方格数
  5. 【javascript】异步编年史,从“纯回调”到Promise
  6. IScroll5中文API整理,用法与参考
  7. Java—List的用法与实例详解
  8. 数据库系统原理(第二章关系数据库 )
  9. 在linux下实现mysql自动备份数据
  10. SDUT 3377 数据结构实验之查找五:平方之哈希表