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;
});

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

window.postMessage实现跨域通信

# window.postMessage 1.html5最常用的API之一,实现两个不同域窗口对象之间的数据通信。 2.在发送数据窗口执行:otherWindow.postMessage(msg,or...

使用window.postMessage实现跨域通信

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

【js】window.addEventListener介绍说明

原型 public override function addEventListener(type:String, listener:Function, useCapture:Boolean = f...

ios input 光标

ios input 只读, 仍有光标闪动问题

input输入框中光标高度的变化问题

最近在项目中碰到一个问题: 搜索框的光标高度在有输入内容和为空时发生很大变化。 那么于是在web上搜索了一下前辈们是怎么解决此问题的 首先,先看看问题产生的原因:chrome浏览...

前端使用ajax发送jsonp格式解决跨域访问的问题

1.使用jsonp发送ajax请求 ajax发送jsonp格式一般类型要指定为get请求 //ajax跨域访问可以使用jsonp的格式 function test(){ $.ajax({ ...

IOS中使用网页时input去除默认样式的两个属性

1、-webkit-appearance    参考 :http://www.w3cplus.com/css3/changing-appearance-of-element-with-css3.ht...

ios输入框被键盘挡住的解决办法

做IOS开发时,难免会遇到输入框被键盘遮掩的问题。上网上搜索了很多相关的解决方案,看了很多,但是由衷的觉得太麻烦了。     有的解决方案是将视图上的所有的东西都添加到一个滚动视图对象( UIScr...
  • wmqi10
  • wmqi10
  • 2012-12-15 00:20
  • 29446
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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