Javascript跨域

跨域：只要协议、域名或端口有任何一个不同，就定义为跨域。

CORS(Cross-Origin Resource Sharing)：即跨域资源共享。定义了在访问跨域资源时，浏览器和服务器该如何沟通。CORS的基本思想就是使用自定义HTTP头部

让浏览器和服务器进行沟通，从而决定请求或相应是应该成功还是失败。

 

通过CORS跨域：

服务端对于CORS的支持，主要通过设置Access-Control-Allow-Origin来进行。如果浏览器检测到相应的设置，就可以允许AJAX进行跨域访问。

例如：

AngularJS中$http就是简单的XMLHttpRequest的封装。

this.BASE_URL = "http://32.1.2.81:80/fgwservices/";

this.getProjectSummary = function (year,type) {
      var deferred = $q.defer();
      var url = configService.BASE_URL + "data/detail.iproject.summary";
      $http.get(url).success(function (data) {
           var filter = jsonPath(data, "$.[?(@.year==" + year +"&@.type=="+type+")]")[0];
           deferred.resolve(filter);
       });
       return deferred.promise;
};

在后台方法中：

response.addHeader("Access-Control-Allow-Origin","*");

即可跨域访问。

 

通过jsonp来跨域：

jsonp也叫填充式json，是应用json的一种新方法。

jsonp由两部分组成：回调函数和数据。回调函数就是当响应到来时应该在页面调用的函数，而数据就是传入回调函数时的json数据。

在js中，我们直接使用XMLHttpRequest请求不同域上的数据是不可以的，但在页面上引入不同域的脚本文件是可以的，jsonp也正是利用这个来实现跨域的。

例如：<script src="http://example.com/data.php?callback=dosomething"></script>

 

CORS和jsonp方式对比：

1)jsonp只能实现get请求，而CORS支持所有类型的HTTP请求；

2)使用CORS可以使用普通的XMLHttpRequest发起请求和获得数据，比起jsonp有更好的错误处理。

所以说，jsonp一般只在浏览器不支持CORS的情况下才使用。