window.postMessage解决前端ajax跨域问题

原创 2016年08月30日 19:11:35

postMessage畅快解决跨域问题

本文主要是记录使用window.postMessage解决ajax跨域问题的方案,实践检验。

window.postMessage简介

window.postMessage 是一个安全的跨源通信的方法。一般情况下,当且仅当执行脚本的页面使用相同的协议(通常都是 http)、相同的端口(http默认使用80端口)和相同的 host(两个页面的 document.domain 的值相同)时,才允许不同页面上的脚本互相访问。 window.postMessage 提供了一个可控的机制来安全地绕过这一限制,当其在正确使用的情况下。

跨域问题对于前端从业者而言绝对不会陌生,如果您是一位喜欢google或者百度的自学爱好者,必然会在检索的页面上看到不同的解决方案。这些解决方案从大类上来看,大致可分为前端解决方案,后端解决方案,前后联调解决方案。

后端方案

通过设置后端接口访问的权限,比如设置access-origin的源策略,让其设置为通配符*,或者发送请求的域名即可,最早的时候设置apache下的访问策略实践过,可解决跨域访问的问题。

前后端联调方案

后端通过返回特定代码片段的形式,前端通过jsonp方式发送请求,但由于是script的方式所以对于post请求无能为力,只能处理get类型。

在页面上通过嵌套指定域名下的中转页面来进行接口调用,但是如果需要传递数据的话可通过window.name来保存并传输接口数据,本人未实践,各位可根据网友的方案自行测试,不赘述。
在页面上通过iframe嵌套目标接口同域名下的页面,请求数据交给iframe页面,实际页面获取数据时,通过window.postMessage来跟iframe的页面进行数据交换。这也是本文要介绍的方案,实际验证可用。

首先,可以一起来理解一下整个方案的思路和结构

Created with Raphaël 2.1.0www.a.com/a.htmlwww.a.com/a.htmlwww.b.com/b.htmlwww.b.com/b.htmlwww.b.com/cgiwww.b.com/cgi根据消息的源将本页面的url回发ajax请求cgi返回的数据post到a域下的a页面

在实现的时候,现在a页面上获取嵌入的iframe的窗口对象,然后向其发送一条消息,消息体是a页面的url,但是具体实现的时候发现数据没发送过去,这个待排查。然后的解决方案就是b页面先广播一条数据,请求握手,然后a页面监听到消息后再根据消息源对象来发送指定数据,可行。

具体示例代码如下:
业务页面逻辑,这里的type为1时表示是握手消息,消息数据可忽略;当type为2时,表示是数据消息,消息体中的data属性为需要的数据内容

window.addEventListener('message',function (event) {
    //alert('message comes');
    var origin = event.origin || event.originalEvent.origin;
    console.log(event.data);
    var ret = JSON.parse(event.data);
    if(ret.type == 1){
      //回复消息
      event.source.postMessage(window.location.href,origin);
    }
    if(ret.type == 2){
      console.log(ret);
    }
},false);

中转页面逻辑,先构造消息体,页面加载时先发送一条广播消息,跟业务页面进行握手;然后根据业务页面传递的参数来做相应的接口调用。

//是否为第一次响应消息的标志
var flag = true;
var fWindow = window.parent;
//var url = fWindow.location.href;
var data = {
    //type为1时,表示是握手
    type : 1
};
//第一次握手,告诉父页面把相关信息发送过来
fWindow.postMessage(JSON.stringify(data) ,'*');

window.addEventListener('message',function (e) {
    if(!flag)
        return;
    var origin = e.origin || e.originalEvent.origin;
    console.log('data from father page ' + e.data);

    //返回验证信息
    e.source.postMessage(JSON.stringify(data),origin);
    //重置标志
    flag = false;
});

经过前后端调试,验证此方案可行,具体逻辑请自行修改相应的逻辑即可。希望对各位读者有用,也欢迎一起讨论。

jquery form插件(ajax)上传文件实现及原理

原理: jquery form插件ajax上传文件的原理, 1、浏览器实现了XMLHttpRequest level2规范的,则使用xhr直接提交文件。通常来说chrome、firefox都实现了xh...

使用jquery.form.js实现无刷新上传文件

在不支持HTML5的浏览器上,并不支持纯Ajax上传文件,这时可以使用插件jquery.form.js,官网http://malsup.com/jquery/form。 客户端代码: ...

使用HTML5中postMessage实现Ajax中的POST跨域问题(很重要)

HTML5中提供了在网页文档之间相互接收与发送信息的功能。使用这个功能,只要获取到网页所在窗口对象的实例,不仅仅同源(域+端口号)的web网页之间可以互相通信,甚至可以实现跨域通信。 浏览器支持程度...

浅谈获取DOM跨域的解决方案——document.domain、window.name、window.postMessage

如果两个网页不同源,就无法拿到对方的DOM。典型的例子是iframe窗口和window.open方法打开的窗口,它们与父窗口无法通信。 获取DOM的跨域解决方案: (1)如果两个窗口一级域名相同...

(跨域问题《一》)HTML5中postMessage实现ajax中的post跨域

HTML5中提供了在网页文档之间相互接收与发送信息的功能。使用这个功能,只要获取到网页所在窗口对象的实例,不仅仅同源(域+端口号)的web网页之间可以互相通信,甚至可以实现跨域通信。 1. 首先,要...
  • l505_
  • l505_
  • 2016年09月18日 17:31
  • 134

使用window.postMessage实现跨域通信

JavaScript由于同源策略的限制,跨域通信一直是棘手的问题。当然解决方案也有很多: document.domain+iframe的设置,应用于主域相同而子域不同;利用iframe和loca...

利用HTML5的window.postMessage实现跨域通信

详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp77   HTML5的window.postMessage简述 po...

HTML5之window.postMessage实现跨域传递消息

在做项目时,遇到了操作iframe的相关问题。业务很简单,其实就是在操作iframe内部某个窗体时,调用父窗体的一个函数。于是就写了两个很简单的htm页面用来测试,使用网上流行的方法在谷歌浏览器中始终...

使用window.name和postMessage实现js跨域

js的跨域问题,老生长谈了。最近使用的比较多,于是整理了下。 一、js跨域的限制:      到底什么样的情况才属于跨域呢?下图给出所有的跨域情况。根据浏览器同源策略,为了安全起见,在跨域的情况下...
  • e_wsq
  • e_wsq
  • 2012年04月10日 19:28
  • 738

window.postMessage实现跨域通信

# window.postMessage 1.html5最常用的API之一,实现两个不同域窗口对象之间的数据通信。 2.在发送数据窗口执行:otherWindow.postMessage(msg,or...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:window.postMessage解决前端ajax跨域问题
举报原因:
原因补充:

(最多只允许输入30个字)