让Spring 支持 跨域请求

参考： http://vraidsys.com/2012/08/spring-mvc-3-enable-cross-origin-resource-sharing/

http://stackoverflow.com/questions/23103832/spring-mvc-does-not-handle-requestmethod-options

http://stackoverflow.com/questions/8863571/cors-request-why-are-the-cookies-not-sent

 

 

1. 修改web.xml

添加dispatchOptionsRequest 参数为true

<servlet>
    <servlet-name>spring-servlet</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
        <param-name>dispatchOptionsRequest</param-name>
        <param-value>true</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
</servlet>

<servlet-mapping>
    <servlet-name>spring-servlet</servlet-name>
    <url-pattern>/*</url-pattern>
</servlet-mapping>

2. 创建  OPTIONS RequestMapping

public class CorsCommon {

    @RequestMapping(value ="/abc" , method = RequestMethod.OPTIONS)
    public void commonOptions(HttpServletResponse theHttpServletResponse) throws IOException {
        response.setHeader("Access-Control-Allow-Methods", "HEAD,GET,POST,PUT,DELETE");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type,Content-Length,Authorization,If-Match,If-None-Match,X-Experience-API-Version,X-Experience-API-Consistent-Through");
        response.setHeader("Access-Control-Expose-Headers", "ETag,Last-Modified,Cache-Control,Content-Type,Content-Length,WWW-Authenticate,X-Experience-API-Version,X-Experience-API-Consistent-Through");
        response.setHeader("Access-Control-Allow-Origin", "*");
    }

 @RequestMapping(value ="/abc" , method = RequestMethod.GET)
    public void commonOptions(HttpServletResponse response) throws IOException {
        System.out.println("test"); 
        response.getWriter().println("test");
    }

}

3. ajax 跨域请求

<script type="text/javascript">
    function getUserInfo() {
		var url = "http://127.0.0.1/abc";

     
        $.ajax({
            url: url,
            crossDomain: true,
            success: function (data, textStatus) {
                console.log('received ', data);
                $("#userinfo").html(data);
            },
            dataType: "text"


        });
    }
</script>

 

ajax 跨域请求要发送cookie(FF 和Chrome可以， IE发送不了cookie ， 待解决)过去需要 加上

xhrFields: {
    withCredentials: true
   }    

服务器端要设置Access-Control-Allow-Credentials 为 true

 

  response.setHeader("Access-Control-Allow-Credentials","true");

 

ajax跨域请求时不能发送自定义的header， 要发送需要在Access-Control-Allow-Headers ，Access-Control-Expose-Headers里面添加自定义的header， 比如： “X-xxx-header”

 

   response.setHeader("Access-Control-Allow-Headers", "Content-Type,Content-Length,Authorization,If-Match,If-None-Match,X-Experience-API-Version,X-xxx-header");
   response.setHeader("Access-Control-Expose-Headers", "ETag,Last-Modified,Cache-Control,Content-Type,Content-Length,WWW-Authenticate,X-Experience-API-Version,X-xxx-header");

 

完整请求

js

<script type="text/javascript">
    function getUserInfo() {
		var url = "http://127.0.0.1/abc";

     
        $.ajax({
            url: url,
            crossDomain: true,
            success: function (data, textStatus) {
                console.log('received ', data);
                $("#userinfo").html(data);
            },
           xhrFields: {
              withCredentials: true
           },    
            dataType: "text"


        });
    }
</script>

 java

   response.setHeader("Access-Control-Allow-Methods", "HEAD,GET,POST,PUT,DELETE");
            response.setHeader("Access-Control-Allow-Headers", "Content-Type,Content-Length,Authorization,If-Match,If-None-Match,X-Experience-API-Version,X-Experience-API-Consistent-Through");
            response.setHeader("Access-Control-Expose-Headers", "ETag,Last-Modified,Cache-Control,Content-Type,Content-Length,WWW-Authenticate,X-Experience-API-Version,X-Experience-API-Consistent-Through");
       response.setHeader("Access-Control-Allow-Origin", "*");
            response.setHeader("Access-Control-Allow-Credentials","true");