現在的很多開發模式是前後端分離的，所以前端頁面和後端服務通常不在同一個域中，但是瀏覽器有一個安全策略，就是不允許跨域請求數據，爲什麼不允許，可以找相關文章學習。下面我們來解決我們的後端服務允許跨域請求。
本地桌面寫一個頁面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..";
}
再來看看：
