解决跨域的几种方式

解决跨域问题的方法

• jsonp
• iframe跨域
• html5中的postMessage（）方法
• 服务器代理
• 设置cors

jsonp方式

因为 iframe、img、style、script等元素的src属性可以直接向不同域请求资源，jsonp正是利用script标签跨域请求资源的简单实现，所以这个和jsonp本质一样，同样需要服务端请求返回callback…形式。具体处理就是在向接口传递参数的时候创建一个script标签，将src属性赋予请求的url，并将参数容纳进去，外加一个callback参数，接下来做的就是创建一个callback函数，赋予形参一个变量，在函数中对这个变量进行处理，因为这个就是返回的结果

 function findWeather () {
       var city = document.getElementById('city').value;
       var src = "http://api.jisuapi.com/weather/query?appkey=21f4782df8c57e19&city=" + city + "&callback=getData";
       addScriptTag(src);
  }
  function getData (data) {
      console.log(data);
  }
  function addScriptTag(src){
      var script = document.createElement('script');
      script.setAttribute("type","text/javascript");
      script.src = src;
      document.body.appendChild(script);
 }

此外，jquery对ajax方法进行了完美的封装，我们只需直接调用即可。

 $.ajax({
          type : 'GET',
          dataType : 'jsonp',
          data : {
            city : city,
            appkey : '21f4782df8c57e19'
          },
          url : "http://api.jisuapi.com/weather/query",
          success : function (data){
            console.log(data);
          }
    });

这种方式的缺点就是，jsonp的原生实现只能使用get请求，这也就在一定程度上造成了一些不安全因素，但是jquery ajax是支持post请求的。

postMessage()

postMessage（）允许来自不同源的脚本采用异步方式进行通信，可以实现跨域消息传递。
postMessage（data，origin）
data：要传递的数据
origin：指明目标窗口的源。协议主机端口号
接收消息：监听window的message事件，包括
data——传递过来的message
source——发送消息的窗口对象
origin——发送消息窗口的源

服务器代理

相当于在后端将我们想要的数据获取下来至代理服务器上，然后传给前端，因为http请求是在服务器端进行的而服务端是不受同源策略的限制的，所以服务器代理也是一个好的方法。
但是这种方式也是有一定的缺陷，就是会增加服务器的负担，且访问速度慢

设置cors

在服务端利用Access-Control-Allow-Origin响应头解决。
设置Access-Control-Allow-Origin：*，允许所有域名的脚本访问该资源。
设置Access-Control-Allow-Origin：…允许特定域名访问

设置cors这种方式，兼容性不太好，比如对于一些老式浏览器是不支持的，这种情况下就适合使用jsonp来处理