前端跨域问题

在做前端开发时，与后台的交互主要是通过ajax来获取后台数据进行前端展示，或者把前端获取的输入提交给后台。使用ajax时，一个经常遇到的问题就是跨域。跨域源于浏览器的同源策略，即本域的js 不能操作其他域的页面，或者说本域的页面不能执行其他域的js，这是浏览器对javascript施加对安全限制。因此，js只能访问同域名下的文档，当ajax要请求的数据存在于其它域名时，就会出现数据请求不到的跨域问题。常用的解决跨域问题方法总结。

1.jsonp

jsonp只能使用get方式，不能使用post方式。
jsonp是常见的解决跨域问题的方法。jsonp的原理也比较容易理解。我们可以发现做web页面上调用js文件时是不受跨域影响的，script标签引用的外部js文件都会得到无条件执行，类似的还有带src属性的img标签和iframe标签，它们都可以引用跨域的资源。script标签引用的js可以得到执行，因此jsonp的本质就是把我们需要的数据包裹在js语句中（即json with padding），通过script标签引用进来，而包裹数据的一般就是我们对数据进行处理的函数名称。举个简单的例子，我们想跨域获取一个数据对其进行展示

<script type="text/javascript">
    var showData = function(data){
        alert("remote data is:"+data);
    }
</script>
<script type="text/javascript" src="http://remoteserver.com/remote.js"></script>

因为跨域，无法在js中通过ajax获取data后展示。但是可以把data包裹在js语句中，远程文件内容如下：

showData("abc");

通过script标签引用跨域文件后，页面弹出提示窗口。
服务器的数据对外提供很多服务，更具灵活性的，可以在请求的URL中附上调用的函数名称，服务端则动态生成带不同函数名称的文件，可以适应不同的应用需求。

jquery对jsonp的实现。

jquery封装了jsonp的跨域方法，我们可以在ajax中进行参数设置，实现jsonp请求。

$.ajax({
     type: "get",
     async: false,
     url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
     dataType: "jsonp",
     jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
     jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
     success: function(json){
         alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');
     },
     error: function(){
         alert('fail');
     }
 });

这时我们并不需要去具体地写这个回调函数，query在处理jsonp类型的ajax时，会自动生成回调函数并把数据取出来供success属性方法来调用。
或者更简洁的$.getjson方法

$.getJSON(url + "&callbak=?", function(data){
    alert("Symbol:" + data.symbol + ", Price:" + data.price);
});

2.Access Control

请求的响应必须包含一个Access- Control-Allow-Origin的HTTP响应头，该响应头声明了请求域的可访问权限。

header("Access-Control-Allow-Origin:*");//允许所有请求源
header("Access-Control-Allow-Methods:GET,POST");//允许get和post请求方式

3.使用HTML5的postMessage方法（两个iframe之间或者两个页面之间）

html5引入的message的API可以更方便、有效、安全的解决多窗口之间、页面与嵌套的iframe消息传递、跨域等难题。
postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。

postMessage(data,origin)方法接受两个参数

1.data:要传递的数据，html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js可以实现类似效果。

2.origin：字符串参数，指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写，这个参数是为了安全考虑，postMessage()方法只会将message传递给指定窗口，当然如果愿意也可以建参数设置为”*”，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为”/”。
那么如何接收消息呢，监听window的message事件就可以。
两个例子：例1 例2