Ajax跨域请求与SpringMVC结合的一些坑

Ajax跨域的概念就不在这边陈述了...

Ajax跨域请求真正的请求之前会进行一次预请求OPTIONS请求，为了让服务器响应是否允许本次跨域请求，那么如果在你的后台程序不能够响应这次预请求，后续的真正的跨域请求也就不可能进行响应了。

首先说一下常见的Ajax跨域请求一些解决方案：

1. Jsonp

$(function(){
    var url ='http://www.xxxx.com/xxx';
    $.ajax({
        type:'post',
        url:url,
        data:{name:'xiaoysec'},
        dataType:'jsonp',
        success:function(result){
                console.log(result);
                }
        });
});

但是问题是即使type设置成post，实际上发送的也是get请求，想要发送post请求，可以参考jsonp发送post请求，关键的步骤如下图

关键设置

2. CORS协议
   CORS协议相关知识有时间再补充进来，上面说过ajax跨域请求首先会进行一次OPTION预请求，那么我的解决方案就是过滤OPTION请求然后响应这次请求。
   具体的做法也是比较简单的，思路就是定义一个全局的过滤器，代码如下：

/**
 * 跨域请求过滤器
 * @author xiaoysec
 *
 */
@Component
public class CrosFilter implements Filter {

    @Override
    public void destroy() {
        // TODO Auto-generated method stub

    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        HttpServletRequest httpRequest = (HttpServletRequest) request;
        if (httpRequest.getMethod() == "OPTIONS" && httpRequest.getHeader("Origin") != null) {
            HttpServletResponse httpResponse = (HttpServletResponse) response;
            httpResponse.setHeader("Access-Control-Allow-Origin", "*");
            httpResponse.setHeader("Access-Control-Allow-Methods", "POST,GET,OPTIONS,DELETE");
            httpResponse.setHeader("Access-Control-Max-Age", "3600");
            httpResponse.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
            // httpResponse.setHeader("","");
            // response.setHeader("","");
        }
        chain.doFilter(request, response);

    }

    @Override
    public void init(FilterConfig config) throws ServletException {
        // TODO Auto-generated method stub
    }
}

只要就是判断请求的方法和请求中是不是带有Origin字段，因为当一次跨域请求进行预请求的时候会携带Origin字段表示访问的来源，这样后续的请求就可以继续进行了

参考

jsonp实现ajax跨域请求
Ajax跨域问题在SpringMVC中的解决方案总结