spring mvc+Ajax跨域請求-CORS方式

關於跨域問題，主要用的比較多的是cros跨域和JSONP跨域，JSONP跨域我已經在另一篇博客中寫了，這裏主要說的是CORS方式的跨域。

CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。 它容許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。

基本思路就是在每一個http請求的時候添加一些附加的頭信息，如：Origin:http://172.18.2.222:8080，Origin字段指的是訪問來源，服務器根據這個值，決定是否贊成此次請求。若是Origin指定的源，不在許可範圍內，服務器會返回一個正常的HTTP迴應。瀏覽器就知道出錯了，從而拋出一個錯誤，被XMLHttpRequest的onerror回調函數捕獲。注意，這種錯誤沒法經過狀態碼識別，由於HTTP迴應的狀態碼有多是200。（我就在這個地方卡住了，服務器正常返回了數據，可是success回調函數一直捕獲不到，老是被error函數捕獲。以前一直都不知道有CORS的跨域方式，一直在使用JSONP的方式！！！）

    服務器只要指定迴應頭的：Access-Control-Allow-Origin，就能實現跨域了，這個Access-Control-Allow-Origin的參數設置爲Origin的源就能夠了。相比JSONP方式，CROS的跨域前端頁面和後臺不須要作出任何更改。

那麼，如何設置服務器的響應頭呢？

下面上代碼：

package com.fh.plugins.filter;

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;

import org.springframework.stereotype.Component;

@Component
public class MyCORSFilter implements Filter {
	 @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        String origin = (String) servletRequest.getRemoteHost()+":"+servletRequest.getRemotePort();
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization");
        response.setHeader("Access-Control-Allow-Credentials","true");
        filterChain.doFilter(servletRequest, servletResponse);
    }

    @Override
    public void destroy() {

    }
}

定義一個過濾器，爲全部的http請求都加上Access-Control-Allow-Origin的頭。

web.xml的配置：

<filter>
	  <filter-name>cors</filter-name>
	  <filter-class>com.fh.plugins.filter.MyCORSFilter</filter-class>
	</filter>
	<filter-mapping>
	  <filter-name>cors</filter-name>
	  <url-pattern>/*</url-pattern>
	</filter-mapping>

前端頁面直接使用Ajax請求便可：

$.ajax({
		  	url:URL+"h5Logs/getIMEI.do",
		  	type:"get",
			success:function(data){
				//alert(data);
				var imei_modes = data.split(";");
				setCookie("IMEI",imei_modes[1],"d30");
				setCookie("user_model",imei_modes[0],"d30");
				setCookie("operators",imei_modes[2],"d30");
	         
			}
		});

對於只知道JSONP的跨域方式的同窗來講（就是我...）， CROS跨域簡直太美妙了！！！

參考博客：

http://www.ruanyifeng.com/blog/2016/04/cors.html

http://www.cnblogs.com/asfeixue/p/4363372.html