基于springMVC与angularJS的跨域问题解决方案

1.JSON的使用

一：知识点

1.jsonp只能使用get请求，解决同源问题，返回javascript代码，因为请求javascript文件是没有同源问题的。
2.当请求数据类型为jsonp时，会将callback=jsonpCallback加在url上，http://localhost:8090/api/testcallback=jsonpCallback
3.前台javascript中定义jsonpCallback函数，此函数必须定义在window下，也就是全局的函数，否则找不到。
4.后台获取请求的callback参数值jsonpCallback，返回字符串”jsonpCallback(result)”，result为返回结果。
5.请求返回的是script tag，首先会调用jsonpCallback函数，不管是否找到该函数，都会调用success函数。
6.如果没有定义jsonp和jsonpCallback，jsonp默认为”callback”,jsonpCallback会是Jquery自动生成的函数名。

二：两种使用的场景

angularJS中jsonp的使用

myUrl = "http://localhost:8090/api/testcallback=JSON_CALLBACK";

$http.jsonp(myUrl).success(
　　function(data){
　　　　alert(data);
　　}
);

解释：

1.angularJS中使用$http.jsonp函数
2.指定callback和回调函数名，函数名为JSON_CALLBACK时，会调用success回调函数，JSON_CALLBACK必须全为大写。
3.也可以指定其它回调函数，但必须是定义在window下的全局函数。
4.url中必须加上callback
5.当callback为JSON_CALLBACK时，只会调用success，即使window中有JSON_CALLBACK函数，也不会调用该函数。

jequery里面的jsonp的使用

 myUrl = "http://localhost:8090/api/test";
 $.ajax({
 　　type:"GET",
 　　url:myUrl,
　　dataType:"jsonp",
　　jsonp:"callback",
　　jsonpCallback:"jsonpCallback",
 　　success:function(data){
　　　　alert(data.msg);
 　　}
 });

 function jsonpCallback(data){
　　alert(data);
 }

三、JsonP使用注意三点

1.确认你的请求url中带有callback=JSON_CALLBACK参数
2.这个callback参数会被angular解析一次，解析为callback=angular.callbacks._{d} //{d}表示整数
3.假设服务器端返回的json字符串为{“msg”:”你好”}，这个字符串必须要用url中的callback参数括起来：angular.callbacks._{d}({“msg”:”你好”})，这样返回就能被AngularJS正确解析了。

四、代码实例

1、angular JS 客户端代码

 <script>
   var app = angular.module('myApp', []);
    var myUrl = "http://192.168.1.120:8080/AngularSpringmvcMybatis/goods/?callback=JSON_CALLBACK";
     app.controller('customersCtrl', function($scope, $http) {
           $http.jsonp(myUrl)
             .success(function(response) {
             //console.log("aaa")
               $scope.goods = response;
            })
            .error(function(error){
            console.log(error);
           })
         });
 </script>

2、Spring MVC服务器端代码

 @RequestMapping("/")
 public @ResponseBody Object getGoodList(String callback){
    if((callback!=null)&&(callback.length()>0)){
        List<Good>  goods=goodService.selectAllGood();
        return new JSONPObject(callback, goods);

    }
    else{
        return (Object)goodService.selectAllGood();
    }
 }

这样就解决了获取数据的跨域问题