通过CORS实现跨域方案解决跨域跨源访问问题

其实很简单，服务器端设置一下response的header相关信息就一切OK了:

Access-Control-Allow-Origin: "*" Access-Control-Allow-Methods: "GET" Access-Control-Max-Age: "60"

然后你观察一下浏览器的行为会发现有趣的事,浏览器在没有你干预的情况下,发现这是一个跨域请求.所以它没有直接发送GET请求,而是发送了一个OPTIONS请求询问是否可以跨域访问该资源,这个过程我们可以称之为"预检".

    然后我们看到OPTIONS的response返回了类似下面的信息:

HTTP/1.1 200 OK Date: Mon, 01 Dec 2013 01:15:39 GMT Server: Apache/2.0.61 (Unix) Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET Access-Control-Max-Age: 60 Content-Encoding: gzip Content-Length: 0 Connection: Keep-Alive Content-Type: text/text

这里的这几个Access头的内容就是服务器后端加上去的,它告诉了浏览器此后的60秒内,所有域都可以通过GET方法进行跨域访问该资源.然后浏览器自动再次发送了真正的GET请求,并返回对应的结果.

    注意这一过程是浏览器自动实现的,这一点是不是非常棒.一些header信息的设置如下:

Access-Control-Allow-Origin:| * // 授权的源控制 Access-Control-Max-Age:// 授权的时间 Access-Control-Allow-Credentials: true | false // 控制是否开启与Ajax的Cookie提交方式 Access-Control-Allow-Methods:[,]* // 允许请求的HTTP Method Access-Control-Allow-Headers:[,]* // 控制哪些header能发送真正的请求

 如果后台是java代码可以添加如下filter来解决问题：

public class ApiOriginFilter implements javax.servlet.Filter {
    @Override
    public void doFilter(ServletRequest request, ServletResponse response,
                         FilterChain chain) throws IOException, ServletException {
        HttpServletResponse res = (HttpServletResponse) response;
        res.addHeader("Access-Control-Allow-Credentials","true");
        res.addHeader("Access-Control-Allow-Origin", "*");
        res.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD");
        res.addHeader("Access-Control-Allow-Headers", "origin, content-type, accept, authorization, SourceUrl, src_url_base, X_Requested_With");
        chain.doFilter(request, response);
    }
    @Override
    public void destroy() {
    }

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }
}

最后推荐ebay解决跨域的开源项目：https://github.com/eBay/cors-filter