现在的很多开发模式是前后端分离的，所以前端页面和后端服务通常不在同一个域中，但是浏览器有一个安全策略，就是不允许跨域请求数据，为什么不允许，可以找相关文章学习。下面我们来解决我们的后端服务允许跨域请求。
本地桌面写一个页面crossdomain.html，通过ajax请求后端数据：
<!DOCTYPE html>
<html style="height: 100%; margin: 0">
<head>
<meta charset="utf-8">
<title>crossdomain</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
</head>
<body >
<div id = "data" ></div>
<script type="text/javascript">
//ajax请求数据
$.ajax({
type:"get",
url:"http:localhost:8080/getByCroDo",
success:function(data){
$("#data").text(data);
},
error:function(){
$("#data").text("数据请求失败");
}
});
</script>
</body>
</html>
在后端，我们新创建一个方法：
@RequestMapping("/getByCroDo")
public String getCrossDomain() {
return "response Cross Domain request..";
}
来试试用浏览器打开 crossdomain.html，结果如下：
前端页面和我们的后台服务不在一个域，安全策略导致数据请求失败。那怎么解决呢？很简单，一个注解搞定，如下：
// 可以被跨域请求的方法
// @CrossOrigin可以放在方法上，也可以放在类上
@CrossOrigin(origins="*",allowCredentials="true")
@RequestMapping("/getByCroDo")
public String getCrossDomain() {
return "response Cross Domain request..";
}
再来看看：
