問題
使用前后端分離模式開發項目時，往往會遇到這樣一個問題 -- 無法跨域獲取服務端數據
這是由于瀏覽器的同源策略導致的，目的是為了安全。在前后端分離開發模式備受青睞的今天，前端和后臺項目往往會在不同的環境下進行開發，這時就會出現跨域請求數據的需求，目前的解決方案主要有以下幾種：
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過濾器，代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
...@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() { }} |
大功告成，現在前端就可以跨域獲取后臺的數據了，比其它方式容易得多，代碼就不解釋了，簡單易懂，使用其它后臺開發方式也一樣，最終目的就是判斷請求，設置響應頭，前端什么事都不用做。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：http://www.jianshu.com/p/d6dc9e60c8e6?utm_source=tuicool&utm_medium=referral
