解决常见接口跨域问题

概念

首先什么是跨域，简单地理解就是因为JavaScript同源策略的限制， 域名下的js无法操作b.com或是c.域名下的对象，也就是不同域名之间相互访问。比如我们在本地访问一个其他服务器上的接口时往往出现下面的情况：

这就说明出现了跨域问题。下面我先说明几个概念

同源策略

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

• 所谓同是指：
  
  • 域名相同
  • 协议相同
  • 端口号相同

URL	说明	是否允许通信
http://www./a.js http://www./b.js	同一域名下	允许
http://www./lab/a.js http://www./script/b.js	同一域名下不同文件夹	允许
http://www.：8000/a.js http://www./b.js	同一域名，不同端口	不允许
http://www./a.js https://www./b.js	同一域名，不同协议	不允许
http://www./a.js https://123.456.78.9/b.js	域名不同	不允许
http://www./a.js https://script./b.js	主域相同，子域不同	不允许
http://www./a.js https:///b.js	同一域名，不同二级域名	不允许

跨域问题就是违背了同源策略

ajax

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。传统网页在更新网页内容时哪怕是很小一部分都需要重载整个页面。但是使用ajax之后，通过在后台与服务器进行少量数据交换，实现异步更新，也就是可以在不重新加载整个网页的情况下，对网页的某部分进行更新。简单粗暴的说就是我们利用ajax从从后台访问数据，这就牵扯到了一个问题，跨域问题！

跨域

跨域的概念刚才简单介绍了，举个例子吧：
如果在A网站中，我们希望使用Ajax来获得B网站中的特定内容，如果A网站与B网站不在同一个域中，那么就出现了跨域访问问题，你可以理解为两个域名之间不能跨过域名来发送请求或者请求数据，否则就是不安全的。但是解决的方式呢：

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

jsonp方式

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。原谅我简单粗暴来代码：

   function findWeather () {
       var city = document.getElementById('city').value;
       var src = "http://api./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);
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

jquery对ajax方法进行了完美的封装，我们直接调用就可以啦。

   $.ajax({
          type : 'GET',
          dataType : 'jsonp',
          data : {
            city : city,
            appkey : '21f4782df8c57e19'
          },
          url : "http://api./weather/query",
          success : function (data){
            console.log(data);
          }
    });
1
2
3
4
5
6
7
8
9
10
11
12

iframe方式

这种方法主要针对于父子页面的情况，我指的是主域名相同而父域名不同的情况，比如像这两个页面：http://www./a.html 和 http://script./b.html 将这两个页面的document.domain都指向主域，用于同一主域下的不同子域之间的跨域请求，来上代码吧：

   //http://www./a.html
   document.domain = '';
   var ifr = document.createElement('iframe');
   ifr.src = 'http://script./b.html';
   ifr.style.display = 'none';
   document.boody.appendChild(ifr);
   ifr.onload = function(){
       var doc = ifr.contentDocument || ifr.contentWindow.document;
       console.log(doc);//获取到的页面数据
1
2
3
4
5
6
7
8
9

   //http://script./b.html
   document.domain = '';
1
2

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：…允许特定域名访问。

缺点比较

jsonp

jsonp的原生实现只能使用get请求，这也就造成了一些不安全因素，但是jquery ajax是支持post请求的。

   crossDomain: true,//如果不设置这个即使写的是post请求也会自动变成get
   dataType: json,
   type: 'POST'
1
2
3

iframe

有一定限制，只能用于同一主域名不同子域名之间的请求。

服务器代理

增加服务器的负担，且访问速度慢

设置cors

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

结语

处理跨域的方法有很多，我这里只列举了这么几个，有问题的话请及时交流哦。