在H5 App中實現自定義Token的注意事項

我們在寫Hybird App時，一般都是利用Token來代替Cookie實現用戶會話。

如果是發布成app的話，由於app自帶了webview環境，運行時與后端服務器的關系相當於Server 2 Server，因此一般不涉及跨域的問題。

但如果發布成H5 App的話，因為是直接在終端的瀏覽器里運行，就會涉及到CORS（跨域資源共享）的處理問題。

關於CORS的解決辦法，主要就是三個方面：

1、簡單請求：不涉及Header的附加信息，直接添加以下頭部響應即可：

response.setHeader("Access-Control-Allow-Origin", "*");            //允許的請求域名
response.setHeader("Access-Control-Allow-Methods", "POST, GET");    //允許的請求方式
response.setHeader("Access-Control-Allow-Headers", "*");        //允許的自定義頭
response.setHeader("Access-Control-Max-Age", "3600");            //信任時間

 

2、復雜請求：如果請求或者響應的Header中包含需要處理的額外信息時，則每次實際請求之前都會發送一次OPTIONS類型的預請求，如果預請求得到正確的回應，才會發送正式請求，因此，需要服務端除了要添加上面的響應以外，還要對預請求進行處理：

String method = getRequest().getMethod().toUpperCase();
if(method == "OPTIONS"){
    response.setStatus(HttpStatus.SC_NO_CONTENT);
}

 

3、發送Token：也是最重要的一點，如果需要通過Header向前端返回Token，那么在發送響應之前，還需要額外添加一行許可：

response.setHeader("Access-Control-Expose-Headers", "MyAppTokenName");
response.setHeader("MyAppTokenName", TokenUtil.getToken());

 

其中紅色的那行代碼非常重要，否則前端將無法接收到response回來的Token串。