Spring MVC 跨域问题

创建Interceptor

package com.jeiker.commons.csrf;

import ...

/**
 * @Author : xiao
 * @Date : 17/6/12 下午3:22
 */
public class CORSInterceptor implements HandlerInterceptor{

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response,
                             Object handler) throws Exception {

        response.addHeader("Access-Control-Allow-Origin", "*");

        return true;
    }

    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response,
                           Object handler, ModelAndView modelAndView) throws Exception {

    }

    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response,
                                Object handler, Exception ex) throws Exception {

    }
}

配置拦截器

spring-mvc.xml 的配置文件中配置拦截器：

<!-- 配置cors拦截器-->
<mvc:interceptors>
    <mvc:interceptor>
        <mvc:mapping path="/operation/**"/>
        <bean class="com.jeiker.commons.csrf.CORSInterceptor"/>
    </mvc:interceptor>
</mvc:interceptors>

说明：

使用通配符*，允许所有跨域访问，所以跨域访问成功。

但是，请注意使用通配符*，会允许来自任意域的跨域请求访问成功，这是比较危险的，所以在生产环境通常会做更精确控制。

简单请求

上述请求是简单请求，只要添加了Access-Control-Allow-Origin：*，就会访问成功，如果是复杂请求，我们需要更进一步的处理，才能成功。

这里先解释一下什么是简单请求和复杂请求。

Simple requests  

A simple cross-site request is one that meets all the following conditions:  

The only allowed methods are:  
GET  
HEAD  
POST  

Apart from the headers set automatically by the user agent (e.g. Connection, User-Agent, etc.), the only headers which are allowed to be manually set are:  

Accept  
Accept-Language  
Content-Language  
Content-Type  
The only allowed values for the Content-Type header are:  
application/x-www-form-urlencoded  
multipart/form-data  
text/plain  

复杂请求

在正式post之前，浏览器会先发出一个options请求（也叫preflight），同时header带上origin还有Access-Control-Request-*:*之类的头，服务器响应会返回相应的access-control-allow-origin，如果匹配，那么浏览器就会发送正式post，否则就会出现上述错误。这也解答了，跨域访问时，我们明明发送的post请求，失败的话，查看chrome network会发现是options方法的原因。

根据上述过程，后台方法额外需要options方法。

@RequestMapping(value = "/login",method=RequestMethod.OPTIONS)  
public void aActionOption(HttpServletResponse response ) throws IOException{  

    System.out.println("option execute.....");  
    response.setHeader("Access-Control-Allow-Headers", "accept, content-type");  
    response.setHeader("Access-Control-Allow-Method", "POST");  
    response.setHeader("Access-Control-Allow-Origin", "http://192.168.192.32");  
}  

@RequestMapping(value = "/login",method=RequestMethod.POST)  
    public void aAction(HttpServletResponse response ) throws IOException{  

        System.out.println("login execute.....");  
    }  

第一次是options请求，http options请求跟get、post、head等一样，都属于http的请求方法，options方法，用来获取服务器端某url支持的方法，response header中allow标志支持的方法。

第二次才是真正的请求。

这个方案是利用了w3c的最新规范，所以该方案依赖浏览器的实现。

总结：

出现Access control allow origin错误，说明是跨域请求失败！浏览器发送请求成功，同时浏览器也接收到响应了，但是限制了XmlHttpRquest接收请求，不会让xmlhttprequest接受到响应，并且在js控制台报错。

这也就是我们在网络控制台(Network)能看见http 状态码是200，但是在js控制台(Console)出现js错误的原因。