使用先後端分離模式開發項目時,每每會遇到這樣一個問題 -- 沒法跨域獲取服務端數據前端
這是因爲瀏覽器的同源策略致使的,目的是爲了安全。在先後端分離開發模式備受青睞的今天,前端和後臺項目每每會在不一樣的環境下進行開發,這時就會出現跨域請求數據的需求,目前的解決方案主要有如下幾種:java
JSONP、iframe、代理模式、CORS等等ajax
前面幾種方式在這裏不講,網上有不少資料。在這裏我主要分享一下CORS這種解決方式,CORS即「跨域資源共享」,它容許瀏覽器向跨源服務器,發出XMLHttpRequest請求,從而克服了AJAX只能同源使用的限制。spring
使用 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」相反,表示不支持的頭信息字段cors
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() { } }
大功告成,如今前端就能夠跨域獲取後臺的數據了,比其它方式容易得多,代碼就不解釋了,簡單易懂,使用其它後臺開發方式也同樣,最終目的就是判斷請求,設置響應頭,前端什麼事都不用作。
本文爲做者kMacro原創,轉載請註明來源:http://www.jianshu.com/p/d6dc9e60c8e6。