解决跨域问题

理解跨域首先必须要了解同源策略。同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。
同源:URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源。

1.document.domain

主域名：www.a.com 二级域名www.script.a.com

具有相同的主域名，不同的二级域名。在每个文件中添加document.domain='a.com';

• www.a.com/a.html
• www.script.a.com/b.html

2.创建script标签

动态创建script标签，在URL中定义callback=returnData,自定义function returnData(){}；

• 访问url将把访问到的信息以函数调用的形式返回给我们，函数的参数为返回的数据，我们在自定义的函数中便可以使用这些数据

3.HTML5中的postMessage

下一代浏览器都将支持这个功能：Chrome 2.0+、Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, 和 Safari 4.0+。

otherWindow.postMessage(message, targetOrigin);
otherWindow: 对接收信息页面的window的引用。可以是页面中iframe的contentWindow属性；window.open的返回值；通过name或下标从window.frames取到的值。
message: 所要发送的数据，string类型。
targetOrigin: 用于限制otherWindow，“*”表示不作限制

• a.com/index.html中的代码：

  <iframe id="ifr" src="b.com/index.html"></iframe>
  <script type="text/javascript">
  window.onload = function() {
    var ifr = document.getElementById('ifr');
    var targetOrigin = 'http://b.com';  // 若写成'http://b.com/c/proxy.html'效果一样
                                        // 若写成'http://c.com'就不会执行postMessage了
    ifr.contentWindow.postMessage('I was there!', targetOrigin);
  };
  </script>

• b.com/index.html中的代码：

  <script type="text/javascript">
    window.addEventListener('message', function(event){
        // 通过origin属性判断消息来源地址
        if (event.origin == 'http://a.com') {
            alert(event.data);    // 弹出"I was there!"
            alert(event.source);  // 对a.com、index.html中window对象的引用
                                  // 但由于同源策略，这里event.source不可以访问window对象
        }
    }, false);
  </script>

4.ajax跨域实例（前端）：

$.ajax({
        type: ,//类型
        url: ,//请求路径
        data:,//你要提交的数据
        dataType: 'jsonp',//关键
        jsonp: "callback",//关键
        success: function (data) {
        console.log(data);
        }
    });