重拾後端之Spring Boot（一）：REST API的搭建可以這樣簡單
重拾後端之Spring Boot（二）：MongoDb的無縫整合
重拾後端之Spring Boot（三）：找回熟悉的Controller，Service
重拾後端之Spring Boot（四）：使用 JWT 和 Spring Security 保護 REST API
重拾後端之 Spring Boot（五） -- 跨域、自定義查詢及分頁
juejin.im/post/58f9ab…
重拾後端之Spring Boot（六） -- 熱載入、容器和多專案
跨域
前面我們初步做出了一個可以實現受保護的 REST API，但是我們沒有涉及一個前端領域很重要的問題，那就是跨域請求（ cross-origin HTTP request ）。先來回顧一些背景知識：
跨域請求
定義：當我們從本身站點請求不同域名或埠的服務所提供的資源時，就會發起跨域請求。
例如最常見的我們很多的 css 樣式檔案是會連結到某個公共 CDN 伺服器上，而不是在本身的伺服器上，這其實就是典型的一個跨域請求。但瀏覽器由於安全原因限制了在指令碼（ script ）中發起的跨域 HTTP 請求。也就是說 XMLHttpRequest 和 Fetch 等是遵循“同源規則”的，即只能訪問自己伺服器的指定埠的資源（同一伺服器不同埠也會視為跨域）。但這種限制在今天，我們的應用需要訪問多種外部 API 或 資源的時候就不能滿足開發者的需求了，因此就產生了若干對於跨域的解決方案，JSONP 是其中一種，但在今天來看主流的更徹底的解決方案是 CORS （ Cross-Origin Resource Sharing ）。
跨域資源共享 （ CORS ）
這種機制將跨域的訪問控制權交給伺服器，這樣可以保證安全的跨域資料傳輸。現代瀏覽器一般會將 CORS 的支援封裝在 HTTP API 之中（ 比如 XMLHttpRequest 和 Fetch ），這樣可以有效控制使用跨域請求的風險，因為你繞不過去，總得要使用 API 吧。
概括來說，這個機制是增加一系列的 HTTP 頭來讓伺服器可以描述哪些源是允許使用瀏覽器來訪問資源的。而且對於簡單的請求和複雜請求，處理機制是不一樣的。
簡單請求僅允許三個 HTTP 方法：GET，POST 以及 HEAD，另外只能支援若干 header 引數：Accept ， Accept-Language ， Content-Language ， Content-Type （值只能是 application/x-www-form-urlencoded、multipart/form-data 和 text/plain）， DPR ， Downlink ， Save-Data ， Viewport-Width 和 Width。
對於簡單請求來說，比如下面這樣一個簡單的GET請求：從 http://me.domain 發起到 http://another.domain/data/blablabla 的資源請求
GET /data/blablabla/ HTTP/1.1
// 請求的域名
Host: another.domain
...//省略其它部分，重點是下面這句，說明了發起請求者的來源
Origin: http://me.domain複製程式碼應用了 CORS 的對方伺服器返回的響應應該像下面這個樣子，當然這裡 Access-Control-Allow-Origin: * 中的 * 表示任何網站都可以訪問該資源，如果要限制只能從 me.domain 訪問，那麼需要改成 Access-Control-Allow-Origin: http://me.domain
HTTP/1.1 200 OK
...//省略其它部分
Access-Control-Allow-Origin: *
...//省略其它部分
Content-Type: application/json複製程式碼那麼對於複雜請求怎麼辦呢？這需要一次預檢請求和一次實際的請求，也就是說需要兩次和對方伺服器的請求/響應。預檢請求是以 OPTION 方法進行的，因為 OPTION 方法不會改變任何資源，所以這個預檢請求是安全的，它的職責在於傳送實際請求將會使用的 HTTP 方法以及將要傳送的 HEADER 中將攜帶哪些內容，這樣對方伺服器可以根據預檢請求的資訊決定是否接受。
// 預檢請求
OPTIONS /resources/post/ HTTP/1.1
Host: another.domain
...// 省略其它部分
Origin: http://me.domain
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type複製程式碼伺服器對預檢請求的響應如下：
HTTP/1.1 200 OK
// 省略其它部分
Access-Control-Allow-Origin: http://me.domain
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: Content-Type
Access-Control-Max-Age: 86400
// 省略其它部分
Content-Type: text/plain複製程式碼接下來的正式請求就和上面的簡單請求差不多了，就不贅述了。
在 Spring Boot 中如何啟用 CORS
囉嗦了這麼多，終於進入正題，但我一直覺得不能光知其然而不知其所以然，所以各位就忍了吧。加入 CORS 的支援在 Spring Boot 中簡單到不忍直視，新增一個配置類即可：
import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
@Configuration
public class CorsConfig {
@Bean
public FilterRegistrationBean corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
// 設定你要允許的網站域名，如果全允許則設為 *
config.addAllowedOrigin("http://localhost:4200");
// 如果要限制 HEADER 或 METHOD 請自行更改
config.addAllowedHeader("*");
config.addAllowedMethod("*");
source.registerCorsConfiguration("/**", config);
FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
// 這個順序很重要哦，為避免麻煩請設定在最前
bean.setOrder(0);
return bean;
}
}複製程式碼如果我們使用 POSTMAN 訪問一下 API，會發現得到一個 Invalid CORS request 的響應，因為我們的 API 只授權給了 localhost:4200
當然，如果我們使用 CURL 的話是可以訪問的，這是因為 CURL 不是瀏覽器。
嗯嗯，這樣就結束了，這節好水，但就是這麼簡單啊。
自定義查詢
我們回過頭來再來看看資料查詢，大部分情況下 Spring Data 提供的按方法名進行查詢的方式足夠簡單也足夠強大，但總歸還是有很多侷限。為了說明這個問題，也順便為我的新 Angular 專案打造一個 API，我們把 API 的需求改一下。現在我們要做的不是一個簡單的 Todo 了，而是類似 Teambition 或 Worktile 那樣的企業協作平臺，當然我們不會做的那麼複雜，是個簡化版本。那麼這時我們的物件模型是這樣的：
我們首先看一下 Project 這個物件，我們來構建它的 API，增刪改沒啥可講。但是查詢上會有點不一樣，首先我們並不希望把所有的 Project 都查出來，而是該使用者參與的專案要提供一個 API 給客戶端。
Project 和 User 按關係型資料庫的看法是個多對多的關係，在MongoDB中這其實有多種做法，可以在 User 物件中設定一個 Project 的集合屬性，也可以在 Project 中設定 User 的集合屬性 （在我們的例子裡是 memebers ），還可以兩者結合，就是在 User 和 Projet 中互相有對方的集合屬性。具體採用哪種需要看業務場景和效能需求，比如如果任何一個專案的成員數如果不會很大，那麼在 Project 中嵌入 User 集合就比較划算；如果專案的成員較多，但一個成員歸屬的專案不會很多的情況下，就可以把 Project 的集合嵌入到 User 中。我們這裡採用了第一種做法。
那麼接下來我們來寫該使用者參與的專案的查詢。當然我們可以按照 Spring Data 強大的按方法名稱來生成對應查詢的方式來做：尋找 members 屬性中包含該使用者的集合
Set<Project> findByMembersContaining(User user)複製程式碼看起來還可以，挺簡單，但是如果我們說再加兩個條件要篩選 project.enabled == true （我們不會物理刪除專案，而是設定其標誌位 enabled，所以這就是篩選未刪除的專案） 和 project.archived == false （專案完結後需要歸檔，這就是篩選未歸檔的）。這兩個條件一加上，好傢伙，我們的方法名變成了下面這個樣子，不忍直視啊：
Set<Project> findByMembersContainingAndEnabledAndArchived(User user, boolean enabled, boolean archived)複製程式碼當然好用還是好用了，但是這個方法名也太長了，好在 Spring Data 中提供很多種方式自定義查詢，我們介紹一種相對簡單的：利用 @Query 註解來進行查詢，方法名字就沒有那麼雷人了：
@Query("{'owner.$id': ?#{[0]}, 'enabled': ?#{[1]}, 'archived': ?#{[2]}}")
Set<Project> findRelated(User user, boolean enabled, boolean archived)複製程式碼這個註解中的內容是一個 JSON 物件，就和我們在 MongoDB 的控制檯查詢的find()中的內容是一樣的，只不過將雙引號換成單引號，將需要變數用 [0]、[1] 和 [2] 的形式表示第一、第二和第三個引數。那麼 ?#{} 是表示裡面的內容是個 SpEL （ Spring 的表示式語言） 表示式。
所以實踐中，我們可以在 MongoDB 的控制檯去實驗語句是否好用，然後在 Spring 中編寫表示式。
db.project.find(
{
"owner.$id": ObjectId("58f5a904edc76ab0e033cfc3"),
"enabled": true,
"archived": false
})複製程式碼
資料的分頁
很多時候我們希望 API 返回的資料是可以分頁的，這個分頁問題在 Spring Boot 有怎樣便捷的方法呢？我們是否需要再定義一堆什麼 pageSize，pageCount，start， off 的引數呢？答案是完全沒必要，分頁這個事情對於 Spring Boot 來說很簡單，只需改變各層級原有方法中返回的 List 或 Set 物件為 Page 物件，傳入引數多一個 Pageable 型別的引數即可。
// Controller
@RequestMapping(method = RequestMethod.GET)
public Page findRelated(
@RequestHeader(value = "userId") String userId,
@RequestParam(value = "enabled", defaultValue = "true", required = false) boolean enabled,
@RequestParam(value = "archived", defaultValue = "false", required = false) boolean archived,
Pageable pageable) {
return service.findRelated(userId, enabled, archived, pageable);
}
// Repository
@Query("{'owner.$id': ?#{[0]}, 'enabled': ?#{[1]}, 'archived': ?#{[2]}}")
Page findRelated(ObjectId userId, boolean enabled, boolean archived, Pageable pageable); 複製程式碼現在呢，我們就可以這樣使用了 GET http://localhost:8090/projects/?page=0&size=3 表示取每頁三個資料取第一頁。
本章程式碼：github.com/wpcfan/spri…
另外，我的 《Angular 從零到一》出版了，下面是書籍的內容簡介:
本書系統介紹Angular的基礎知識與開發技巧，可幫助前端開發者快速入門。共有9章，第1章介紹Angular的基本概念，第2~7章從零開始搭建一個待辦事項應用，然後逐步增加功能，如增加登入驗證、將應用模組化、多使用者版本的實現、使用第三方樣式庫、動態效果製作等。第8章介紹響應式程式設計的概念和Rx在Angular中的應用。第9章介紹在React中非常流行的Redux狀態管理機制，這種機制的引入可以讓程式碼和邏輯隔離得更好，在團隊工作中強烈建議採用這種方案。本書不僅講解Angular的基本概念和最佳實踐，而且分享了作者解決問題的過程和邏輯，講解細膩，風趣幽默，適合有物件導向程式設計基礎的讀者閱讀。
歡迎大家圍觀、訂購、提出寶貴意見。
