前端-關於CORS跨域的解決方案，面向服務端

最近本身在寫後臺管理系統的時候，並無採用jsp、freemaker、葉子等模板技術，而是由後端提供數據api，前端經過AJAX和JQuery來動態操做頁面上的一些div、table元素，從而實現報表的動態加載。

由於本人並不是專業前端，因此採用的技術比較古老，對於最近的前端框架，vue,angular,react等等,暫且按下不表。

說說遇到的幾個坑：

一、AJAX發送請求的時候，默認是異步的，而不是同步的。

基於低耦合的編碼，我在寫ajax時，數據請求和數據處理是分開的，沒加同步執行就致使了個人請求發送後，沒有拿到回調的數據就已經開始執行數據處理了。

 

二、關於非同源連接發送異地址的請求，也就是CORS，跨域問題。

瀏覽器出於安全考慮，限制了JS發起跨站請求，使用XHR對象發起請求必須遵循同源策略（SOP：Same Origin Policy），跨站請求會被瀏覽器阻止，這對開發者來講是很痛苦的一件事，尤爲是要開發先後端分離的應用時。

在現代化的Web開發中，不一樣網絡環境下的資源數據共享愈來愈廣泛，同源策略能夠說是在必定程度上限制了Web API的發展。

關於跨域問題，只要用ajax來發送請求都會遇到。上個月一直在作一個小程序應用的後端服務接口，前端的朋友並無和我放映有跨域問題，估計是小程序底層作了比較良好的封裝，或者底層並非使用簡單的ajax請求，從而規避了這個問題。

前端若是解決的話，無非就是jsonp，加請求頭，可是這樣會增長前端同事的工做量。

個人解決方案是在後端解決：

（1）最簡陋的方法，在後端web中添加一個filter，這個filter要的過濾順序放在最前面，將對應的HTTP請求加上一個請求頭。

 1 /**
 2  * 解決跨域問題
 3  * Created by huxingyue on 2017/8/31.
 4  */
 5 @WebFilter(filterName = "CORSFilter")
 6 public class CORSFilter implements Filter {
 7     public void destroy() {
 8     }
 9 
10     public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
11         HttpServletResponse response = (HttpServletResponse) resp;
12         response.setHeader("Access-Control-Allow-Origin", "*");
13         response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
14         response.setHeader("Access-Control-Max-Age", "3600");
15         response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
16         chain.doFilter(req, resp);
17     }
18 
19     public void init(FilterConfig config) throws ServletException {
20 
21     }
22 
23 }

 

（2）使用@CrossOrigin註解

 

 1 @RestController
 2 @RequestMapping("/account")
 3 public class AccountController {
 4 
 5     @CrossOrigin
 6     @GetMapping("/{id}")
 7     public Account retrieve(@PathVariable Long id) {
 8         // ...
 9     }
10 
11     @DeleteMapping("/{id}")
12     public void remove(@PathVariable Long id) {
13         // ...
14     }
15 }

這是一個很簡單的示例，官方參考文檔還有更加全面的示例。

 1 <mvc:cors>
 2 
 3     <mvc:mapping path="/api/**"
 4         allowed-origins="http://domain1.com, http://domain2.com"
 5         allowed-methods="GET, PUT"
 6         allowed-headers="header1, header2, header3"
 7         exposed-headers="header1, header2" allow-credentials="false"
 8         max-age="123" />
 9 
10     <mvc:mapping path="/resources/**"
11         allowed-origins="http://domain1.com" />
12 
13 </mvc:cors>

 

 

參考文檔：http://spring.io/blog/2015/06/08/cors-support-in-spring-framework

（3）使用第三方CORSFilter

官網：http://software.dzhuvinov.com/cors-filter.html

 

三、AJAX發送post請求，數據爲json時，data對應的內容應該是json字符串，而不是json字符串

 

 

參考資料：

http://start.spring.io/

http://www.jianshu.com/p/d05303d34222