解决常见接口跨域问题

概念

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

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

同源策略

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

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

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

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

ajax

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

跨域

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

• 解决跨域问题的方法
  
  • jsonp
  • script元素的src属性处理
  • 在服务器使用get处理
  • flash跨域
  • iframe跨域
    这里我们主要讲比较常用的前两种吧。

jsonp方式

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

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

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

script标签处理方式

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

这也是原生js处理跨域问题的一个解决方式。

结语

处理跨域的方法有很多，我这里只列举了两个，也是最常用的两个，有问题的话请及时交流哦。