Spring透過CROS協定解決跨域問題

現在接手學校網路中心的一個項目，根據團隊成員的實際情況以及開發需要，老師希望做到前後端完全分離。後台使用java提供restful API 作為核心，前台無論PC或行動端可以共用一個核心。前期解決了哦oauth2，作為授權機制等問題，本以為大業將成。 （最近打算詳細介紹一下機遇Spring sercurity 實現oauth2的解決方案）結果又出現了一個跨域問題，讓我們踩了一個大坑，記錄在此，以絕後患。

錯誤訊息如下：

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 403.

什麼是跨域

簡單的說即為瀏覽器限制訪問A站點下的js代碼對B站點下的url進行ajax請求。比方說，前端網域是www.abc.com，那麼在目前環境中運行的js程式碼，出於安全考慮，存取www.xyz.com網域下的資源，是受限的。現代瀏覽器預設都會基於安全原因而阻止跨網域的ajax請求，這是現代瀏覽器中必備的功能，但是往往會給開發帶來不便。特別是對我這樣後台開發人員來講，這個事情簡直神奇。

但跨域的需求卻一直都在，為了跨域，勤勞勇敢的程序猿們想出了許許多多的方法，例如，jsonP、代理文件等等。但這些做法增加了許多不必要的維護成本，而且應用場景也有許多限制，例如jsonP並非XHR，所以jsonP只能使用GET傳遞參數。更詳細的資料可以看這裡 Web應用跨域訪問解決方案匯總

CORS協議

如今的JS大有一統天下的趨勢，瀏覽器已經成了大多應用最好的安身之所。即使在行動端也有各種Hybird方案，在本地檔案系統的Web頁面，也有需要取得外部資料的需求，而這些需求也必然是跨域的。在尋找跨域解決方案時，發現了最優雅解決方案就是HTML5來帶了的「Cross-Origin Resource Sharing」的新特性，來賦予開發者權力決定資源是否允許被跨域存取。

CORS是一個W3C標準，全名為」跨域資源共享」（Cross-origin resource sharing）。

它允許瀏覽器向跨來源伺服器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。

為什麼說它優雅呢？

整個CORS通訊過程，都是瀏覽器自動完成，不需要使用者參與。對開發者來說，CORS通訊與同源的AJAX通訊沒有差別，程式碼完全一樣。瀏覽器一旦發現AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感覺。

因此，實現CORS通訊的關鍵是伺服器。 只要伺服器實作了CORS介面 ，就可以跨源通訊。

解決這個問題的關鍵就落在了我這個負責後台的程式猿身上。

看看文件也不是什麼難事嘛，就是需要在http頭中設定Access-Control-Allow-Origin來決定需要允許哪些網站來存取。關於CROS協定更詳細內容參考 跨域資源共享CORS 詳解

CROS常見header

CORS具有以下常見的header

Access-Control-Allow-Origin: http://kbiao.me  

Access-Control-Max-Age: 3628800

Access-Control-Allow-Methods: GET，PUT, DELETE

Access-Control-Allow-Headers: content-type

“Access-Control-Allow-Origin”表明它允許”http://kbiao.me “發起跨域請求

「Access-Control-Max-Age」表示在3628800秒內，不需要再傳送 預檢驗 請求，可以快取該結果（上面的資料上我們知道CROS協定中，一個AJAX請求被分成了第一步的 OPTION 預檢測請求和正式請求）

「Access-Control-Allow-Methods」表明它允許GET、PUT、DELETE的外域請求

「Access-Control-Allow-Headers」表明它允許跨域請求包含content-type頭

當然在處理這個問題的時候前端也有不少坑，特別是Chrome瀏覽器不允許localhost的跨域請求，詳細方案見我專案中負責前端解決方案的小伙伴。 假裝有連結

常規解決方案

知道了問題的原因，也知道了配套的解決方法，現在就讓我們來實現解決。想法很簡單，當前端要請求跨域資源時候，我們給它加上回應的回應頭即可。很顯然我們自己定義一個過濾器是最簡單不過了。

/**
 * Created by kangb on 2016/5/10.
 */
@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() {

    }
}

@Component 是Spring的注解，关键部分在doFilter中，添加了我们需要的头， option 是预检测需要所以需要允许， Authorization 是做了oauth2登录响应所必须的， Access-Control-Allow-Credentials 表示允许cookies。都是根据自己项目的实际需要配置。

再配置Web.xml使得过滤器生效

<filter>
  <filter-name>cors</filter-name>
  <filter-class>·CLASS_PATH·.myeCORSFilter</filter-class>
</filter>
<filter-mapping>
  <filter-name>cors</filter-name>
  <url-pattern>/api/*</url-pattern>
</filter-mapping>

接下来前端就可以像往常一样使用AJAX请求获得资源了，完全不需要做出什么改变。

SPRING 4中更优雅的办法

SpringMVC4提供了非常方便的实现跨域的方法。在requestMapping中使用注解。

@CrossOrigin(origins = “http://kbiao.me”) 

全局实现 .定义类继承WebMvcConfigurerAdapter,设置跨域相关的配置

public class CorsConfigurerAdapter extends WebMvcConfigurerAdapter{

  @Override
  public void addCorsMappings(CorsRegistry registry) {
    
    registry.addMapping("/api/*").allowedOrigins("*");
  }
}

将该类注入到容器中：

<bean class="com.tmall.wireless.angel.web.config.CorsConfigurerAdapter"></bean>