AngularJS通过CORS实现跨域访问

什么是跨域请求
可以理解为两个域名间交互数据的请求；
而现代浏览器默认都会基于安全原因而阻止跨域的ajax请求，这是现代浏览器中必备的功能，于是乎就有跨域访问的问题。

一般错误表现：
XMLHttpRequest cannot load XXXX. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'XXXX' is therefore not allowed access.

解决方法：
在 response 中添加 header
("Access-Control-Allow-Origin", "*");
("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
("Access-Control-Max-Age", String.valueof(3600*2));
("Access-Control-Allow-Headers", "x-requested-with");

添加方式很多，下面给出我的添加方式：
一、环境是：spring mvc 4.0, tomcat 7.0
二、服务端配置
2.1、定义类,
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 MyCORSFilter implements Filter {
  public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
    HttpServletResponse response = (HttpServletResponse) res;
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET");// 允许跨域访问的类型
    response.setHeader("Access-Control-Max-Age", String.valueof(3600*2));
    response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
    chain.doFilter(req, res);
  }
  public void init(FilterConfig filterConfig) {}
  public void destroy() {}
}

2.2、在 web.xml 中添加 过滤器
<filter>
  <filter-name>corsFilter</filter-name>
  <filter-class>com.xxx.MyCORSFilter</filter-class>
</filter>
<filter-mapping>
  <filter-name>corsFilter</filter-name>
  <url-pattern>/*</url-pattern> // 配置你的需要跨域的 url 过滤
</filter-mapping>

三、AngularJS 端访问代码
注：因为用到了JSON.stringify 函数，所以需要引入 json2.js
$http(
        {method: "get",
          url: url + "?“ + params,
          headers:{"Content-Type":"application/x-www-form-urlencoded"}
        }
      ).then(function(response) {
        console.log("[status:" + response.status + "; data:" + JSON.stringify(response) + "]");
      }, function(response) {
        var data = response;
        console.log("[status:" + response.status + "; data:" + JSON.stringify(data) + "]");
      });


--------------------------------------------------------------------
若有其他凝问或文中有错误，请及时向我指出，
我好及时改正，同时也让我们一起进步。
email ： [email protected]
qq     ： 1035862795
敲门砖： 代码谱写人生