問題

使用前後端分離模式開發項目時，往往會遇到這樣一個問題 -- 無法跨域獲取服務端數據

這是由於瀏覽器的同源策略導致的，目的是為了安全。在前後端分離開發模式備受青睞的今天，前端和後臺項目往往會在不同的環境下進行開發，這時就會出現跨域請求數據的需求，目前的解決方案主要有以下幾種：

JSONP、iframe、代理模式、CORS等等

前面幾種方式在這裏不講，網上有很多資料。在這裏我主要分享一下CORS這種解決方式，CORS即“跨域資源共享”，它允許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。

使用 CORS 跨域的時候和普通的 ajax 過程是一樣的，只是瀏覽器在發現這是一個跨域請求的時候會自動幫我們處理一些事情，所以說只要服務端提供支持，前端是不需要做額外的事情的

實現

實現的大概思路是這樣的，首先使用過濾器獲取請求對象request的信息，比如Origin 字段（表示請求來自哪個源，包括協議、域名、端口），通過預先配置的參數判斷請求是否合法，然後設置響應對象response的頭信息，實現跨域資源請求。在介紹實現方式之前我們先來了解一下會用到的響應頭信息。

響應頭

• Access-Control-Allow-Methods
  用來列出瀏覽器的CORS請求允許使用的HTTP方法，如：GET、POST、PUT、DELETE、OPTIONS

• Access-Control-Allow-Credentials
  表示是否支持跨域Cookie

• Access-Control-Allow-Headers
  逗號分隔的字符串，表示服務器支持的所有頭信息字段，如Content-Type以及自定義的字段

• Access-Control-Expose-Headers
  與“Access-Control-Allow-Headers”相反，表示不支持的頭信息字段

• Access-Control-Allow-Origin
  允許跨域的請求源信息，包括協議、域名、端口，為*表示允許所有請求來源，並且只能設置一個請求源

下面介紹一下Java後臺如何實現這種方式。

代碼

由於最近在使用spring-boot，所以接下來以spring-boot為基礎來實現。

首先創建一個CorsFilter過濾器，代碼如下：

...
@WebFilter(filterName = "corsFilter", urlPatterns = "/*",
        initParams = {@WebInitParam(name = "allowOrigin", value = "*"),
                @WebInitParam(name = "allowMethods", value = "GET,POST,PUT,DELETE,OPTIONS"),
                @WebInitParam(name = "allowCredentials", value = "true"),
                @WebInitParam(name = "allowHeaders", value = "Content-Type,X-Token")})
public class CorsFilter implements Filter {

    private String allowOrigin;
    private String allowMethods;
    private String allowCredentials;
    private String allowHeaders;
    private String exposeHeaders;

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        allowOrigin = filterConfig.getInitParameter("allowOrigin");
        allowMethods = filterConfig.getInitParameter("allowMethods");
        allowCredentials = filterConfig.getInitParameter("allowCredentials");
        allowHeaders = filterConfig.getInitParameter("allowHeaders");
        exposeHeaders = filterConfig.getInitParameter("exposeHeaders");
    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        if (!StringUtils.isEmpty(allowOrigin)) {
            if(allowOrigin.equals("*")){
                response.setHeader("Access-Control-Allow-Origin", allowOrigin);
            }else{
                List<String> allowOriginList = Arrays.asList(allowOrigin.split(","));
                if (allowOriginList != null && allowOriginList.size() > 0) {
                    String currentOrigin = request.getHeader("Origin");
                    if (allowOriginList.contains(currentOrigin)) {
                        response.setHeader("Access-Control-Allow-Origin", currentOrigin);
                    }
                }
            }
        }
        if (!StringUtils.isEmpty(allowMethods)) {
            response.setHeader("Access-Control-Allow-Methods", allowMethods);
        }
        if (!StringUtils.isEmpty(allowCredentials)) {
            response.setHeader("Access-Control-Allow-Credentials", allowCredentials);
        }
        if (!StringUtils.isEmpty(allowHeaders)) {
            response.setHeader("Access-Control-Allow-Headers", allowHeaders);
        }
        if (!StringUtils.isEmpty(exposeHeaders)) {
            response.setHeader("Access-Control-Expose-Headers", exposeHeaders);
        }
        filterChain.doFilter(servletRequest, servletResponse);
    }

    @Override
    public void destroy() {

    }
}

大功告成，現在前端就可以跨域獲取後臺的數據了，比其它方式容易得多，代碼就不解釋了，簡單易懂，使用其它後臺開發方式也一樣，最終目的就是判斷請求，設置響應頭，前端什麽事都不用做。

Java學習交流QQ群：589809992 禁止閑聊，非喜勿進！

Java實現CORS跨域請求