一：案例实现
从网上下载了一个AngularJS项目，配置启动后发现数据发送不到自己的后台中去，总是提示跨域问题。
下面是AngularJS的部分代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="">
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<Meta http-equiv="Access-Control-Allow-Origin" content="*">
<title>AngularJSTest</title>
</head>
<body ng-controller="MyController">
<p>User</p>
<p>ID</p>
<input id="id" name="id" ng-model="saveUser.id">
<br>
<p>Name</p>
<input id="id" name="name" ng-model="saveUser.name">
<br>
<p>age</p>
<input id="id" name="age" ng-model="saveUser.age">
<br>
<ul>
<li ng-repeat="x in infos">
{{ x.ID + x.name + x.age }}
</li>
</ul>
<button ng-click="getUser()">提交</button>
<script>
function MyController($scope,$http){
$scope.saveUser = {
id:1,name:"John",age:"16"
};
$scope.getUser = function(){
$http({
method: "POST",url: "http://localhost:8080/Spring-MVC/AngularJS/getUser.do",data: $scope.saveUser
}).success(function (data){
$scope.infos = data;
})
};
}
</script>
<script src="lib/angular/angular.js"></script>
</body>
</html>
注意：在$http中URL前部分为后台项目的路径。
后台需要自己写一个过滤器，并配置到web.xml中去
package com.jxq.util;
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.servletexception;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;
public class RequestFilter implements Filter {
public void init(FilterConfig filterConfig) throws servletexception {
// Todo Auto-generated method stub
}
public void doFilter(ServletRequest request,ServletResponse pResponse,FilterChain chain)
throws IOException,servletexception {
// Todo Auto-generated method stub
HttpServletResponse response = (HttpServletResponse) pResponse;
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader("Access-Control-Allow-Methods","POST,GET,DELETE,PUT");
response.setHeader("Access-Control-Allow-Headers","x-requested-with,content-type");
chain.doFilter(request,response);
}
public void destroy() {
// Todo Auto-generated method stub
}
}
web.xml中的配置
<filter>
<filter-name>requestFilter</filter-name>
<filter-class>com.jxq.util.RequestFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>requestFilter</filter-name>
<url-pattern>*.do</url-pattern>
</filter-mapping>
Controller:
package com.jxq.controller.user;
import java.util.ArrayList;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.jxq.entity.user.AngularUser;
import com.jxq.service.user.UserOperate;
@Controller
@RequestMapping(value="/AngularJS")
public class UserController {
@Autowired
private UserOperate userOperate;
@RequestMapping(value="/getUser.do",method=RequestMethod.POST)
@ResponseBody
public List<AngularUser> save(@RequestBody AngularUser angularUser){
System.out.println("ID:" + angularUser.getId());
System.out.println("name:" + angularUser.getName());
System.out.println("age:" + angularUser.getAge());
List<AngularUser> lists = new ArrayList<AngularUser>();
AngularUser user1 = new AngularUser();
user1.setId("001");
user1.setAge("25");
user1.setName("zhangsan");
lists.add(user1);
AngularUser user2 = new AngularUser();
user2.setId("002");
user2.setAge("26");
user2.setName("lisi");
lists.add(user2);
AngularUser user3 = new AngularUser();
user3.setId("003");
user3.setAge("27");
user3.setName("wangwu");
lists.add(user3);
return lists;
}
}
必须要加上@responseBody，否则无法返回数据给前端，稍后的博客会详细介绍@requestBody和@responseBody
二：跨域问题详解
下面详细说一下AngularJS的$http请求跨域，此部分为网上查询得到。
跨域，前端开发会经常遇见，AngularJS实现跨域方式类似于Ajax,使用的是CORS机制。
1:CORS机制：
是一种允许当前域的资源被其他域的脚本请求访问的机制。整个请求都是浏览器自动完成，不需要用户参与，会自动添加一些附加的头信息，有时候会多发出一次附加的请求。
分为两种：简单请求和非简单请求。
区别在于只要满足两类条件，就是简单请求。
（1）：请求方法是一下三种方法之一：HEAD、GET和POST
（2）：请求的头信息不超过一下几种字段：
Accept、Accept-Language、Content-Language、Last-event-id和Content-Type
其中Content-Type的值：application/x-www-form-urlencoded、multipart/form-data和text/plain
凡是不满足上述两个条件的，都是非简单请求。浏览器对于这两种请求的处理方式是不一样的。
a：简单请求
对于简单请求，浏览器直接发出CORS请求，就是在头信息中会增加一个Origin字段.
Origin字段用来说明本次请求来自哪个源(协议+域名+端口)，服务器根据这个值，决定是否同意这次请求。
如果是不在许可范围内，服务器会返回一根正常的HTTP回应，但是没有包括Access-Control-Allow-Origin字段，就知道是出错了，从而跑出错误，被XMLHttpRequest的onerror回调函数捕获。
注意：这种错误是无法通过状态码识别，因为HTTP回应可能是200。
如果Origin制定的域名在许可范围内，服务器返回的响应，就会多几个头信息字段。
红色框括起来的，是可CORS请求想看的字段，都是以Access-Control-开头
（1）：Access-Control-Allow-Origin
该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任何域名的请求。
（2）：Access-Control-Allow-Credentials
可选，是一个布尔值，表示是否允许发送Cookie，默认情况下，Cookie不包括在CORS请求之中，设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发送给服务器。这个值也只能设为true。如果不需要浏览器发送Cookie给服务器，删除即可。
（3）：Access-Control-Expose-Headers
可选，CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader('FooBar')可以返回FooBar字段的值。
b：非简单请求
是那种对服务器有特殊要求的请求，请求方法是PUT或DELETE，或者Content-Type类型为application/json
首先是预检测：在正式通讯之前，发送一次查询请求，询问是否在许可名单中以及可以使用那些HTTP动词和头信息。只有得到答复，才会正式发起请求，否则报错。
预检测通过之后，浏览器就会发送一个正常的请求。
c：与JSONP的比较
JSONP只支持GET请求，CORS支持所有的类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。
2：AngularJS的$http
AngularJS的$http请求方式：
$http.post(url,data,[config]).success(function(){ ... });
$http.get(url,[config]).success(function(){ ... });
1）：JSONP方式：
指定callback和回调函数名，函数名为JSON_CALLBACK时，会调用success回调函数，JSON_CALLBACK必须全为大写。
$http.jsonp("http://localhost/sitesettings/getBadgeInfo.pt?jsonp=JSON_CALLBACK&siteid=137bd406").success(function(data){...});
（2）：get方式
前端代码：
functiongetAdustryController($scope,$http){
$http.get('http://localhost/ajax/getAllIndustryCategoty.pt?languageColumn=name_eu').success(function(data){
$scope.industries=data;
});
}
（3）POST请求：
在服务端设置允许在其他域名下访问、响应类型、响应头
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader("Access-Control-Allow-Methods",PUT");
response.setHeader("Access-Control-Allow-Headers",content-type");
在服务端设置：
response.setHeader("Access-Control-Allow-Origin",content-type");