Angularjs cors 用get、post方法与springmvc后传递json数据的配置

首先介绍跨域问题，基于安全的考虑，页面只有在同一个域名下，交流数据，比如网易就不能申请百度的服务（抓取网页那是另外的技术），ajax也是这个使用范围，跨域就失效了。

在移动开发中，手机本身就是web站点，后台pc服务器是另外一个web站点。这样就存在跨域问题。

早先用jsonp方法，或者在srpingmvc中设置拦截器来解决跨域传递json格式数据，但这些都过时了。

下面是最新的。注意只有spring4.3以上（包含4.3）才有效。

1.后台增加3个json的jar包，如下：

jackson-databind

jackson-core

jackson-annotations

附上maven配置，一看就懂了

       <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.8.5</version>
        </dependency>       
       
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.8.5</version>
        </dependency> 
        
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
            <version>2.8.5</version>
        </dependency> 

2.后台设置，springmvc，中只要在类上设置一个注解@CrossOrigin，那么这个类就可以接受跨域申请。注意只有spring4.3以上（包含4.3）才支持注解@CrossOrigin，这点很多文章没提到。 @CrossOrigin 的具体只接受某个域名的配置自己去网上查帮助。默认是允许所有域名访问。

具体的代码如下，

@CrossOrigin( maxAge = 3600)//配置这里就行了

@Controller

@RequestMapping("/personController")

public class PersonController {

//篇幅有限内容掏空了，最后由完成代码

}

3. 在返回json数据的方法上加注解：@ResponseBody （一般用于后台发达前端的 json数据）

@RequestMapping(value="getjsonp/{id}",method=RequestMethod.GET)

@ResponseBody

public Collection getjson(@PathVariable("id") Integer id,String callback) throws Exception{

}

4.在获取json数据的参数上加注解：@RequestBody （一般有用前端传递到后台的json数据）

@RequestMapping(value="postjson",method=RequestMethod.POST)

public String postjson(@RequestBody Person p) throws Exception{

}

附上后台接受方法，请注意后台方法直接反java类型就ok，系统会自动转成json格式

剩下的就是客户代码：下面演示了post和get方法，其中get部分去掉注释就可以了。我这里是为方便测试。

< script type= "text/javascript" >

var app =angular.module( "myApp" ,[]);

app .controller( 'firstController' , function ($scope,$http) {

//$scope.xx="xyz";

// $http.get('http://localhost:8080/SSM1/personController/getjsonp/100').success(function (data, status, headers, config){

// console.log(data);

// console.log(status);

// console.log(headers);

// console.log(config);

// }

//

// ).error(function (data, status, headers, config) {

// console.log(data);

// console.log(status);

// console.log(headers);

// console.log(config);

//

// })

$http({

url : 'http://localhost:8080/SSM1/personController/postjsonp' ,

method : 'POST' ,

data : { id : 1 , name : ' 美国 ' , age : 16 }

}).success( function (){

console . log ( "success!" );

}). error ( function (){

console . log ( "error" );

})

});

</ script >

最后附上后台完整方法：

@CrossOrigin( maxAge = 3600)

@Controller

@RequestMapping("/personController")

public class PersonController {

//获取前端发出的get请求，前端代码要打开注解

@RequestMapping(value="getjson/{id}",method=RequestMethod.GET)

@ResponseBody

public Collection getjson(@PathVariable("id") Integer id,String callback) throws Exception{

Person p1= new Person(1,"aa",30);

Person p2= new Person(2,"bbb",50);

HashMap ps = new HashMap<Integer, Person>();

ps.put(1, p1);

ps.put(2, p2);

System.out.println(id.toString());

System.out.println(callback);

System.out.println("new Person p");

return ps.values();

}

//获取前端发出的post请求

@RequestMapping(value="postjson",method=RequestMethod.POST)

public String postjson(@RequestBody Person p) throws Exception{

System.out.println("id:"+p.getId());

System.out.println("name:"+p.getName());

System.out.println("age:"+p.getAge());

return "ok";

}

}