2. 程式人生 > >從MVC到前後端分離

從MVC到前後端分離

阿新 • • 發佈：2018-12-12

摘要：MVC模式早在上個世紀70年代就誕生了，直到今天它依然存在，可見生命力相當之強。MVC模式最早用於Smalltalk語言中，最後在其它許多開發語言中都得到了很好的應用，例如，Java中的Struts、Spring MVC等框架。

1. 理解MVC

MVC是一種經典的設計模式，全名為Model-View-Controller，即模型-檢視-控制器。

其中，模型是用於封裝資料的載體，例如，在Java中一般通過一個簡單的POJO（Plain Ordinary Java Object）來表示，其本質是一個普通的Java Bean，包含一系列的成員變數及其getter/setter方法。對於檢視而言，它更加偏重於展現，也就是說，檢視決定了介面到底長什麼樣子，在Java中可通過JSP來充當檢視，或者通過純HTML的方式進行展現，而後者才是目前的主流。模型和檢視需要通過控制器來進行粘合，例如，使用者傳送一個HTTP請求，此時該請求首先會進入控制器，然後控制器去獲取資料並將其封裝為模型，最後將模型傳遞到檢視中進行展現。

綜上所述，MVC的互動過程如圖1所示。

2. MVC模式的優點與不足

MVC模式早在上個世紀70年代就誕生了，直到今天它依然存在，可見生命力相當之強。MVC模式最早用於Smalltalk語言中，最後在其它許多開發語言中都得到了很好的應用，例如，Java中的Struts、Spring MVC等框架。正是因為這些MVC框架的出現，才讓MVC模式真正落地，讓開發更加高效，讓程式碼耦合度儘量減小，讓應用程式各部分的職責更加清晰。

既然MVC模式這麼好，難道它就沒有不足的地方嗎？我認為MVC至少有以下三點不足：

  1. 每次請求必須經過“控制器->模型->檢視”這個流程，使用者才能看到最終的展現的介面，這個過程似乎有些複雜。
  2. 實際上檢視是依賴於模型的，換句話說，如果沒有模型，檢視也無法呈現出最終的效果。
  3. 渲染檢視的過程是在服務端來完成的，最終呈現給瀏覽器的是帶有模型的檢視頁面，效能無法得到很好的優化。

為了使資料展現過程更加直接，並且提供更好的使用者體驗，我們有必要對MVC模式進行改進。不妨這樣來嘗試，首先從瀏覽器傳送AJAX請求，然後服務端接受該請求並返回JSON資料返回給瀏覽器，最後在瀏覽器中進行介面渲染。

改進後的MVC模式如圖2所示。

也就是說，我們輸入的是AJAX請求，輸出的是JSON資料，市面上有這樣的技術來實現這個功能嗎？答案是REST。

REST全稱是Representational State Transfer（表述性狀態轉移），它是Roy Fielding博士在2000年寫的一篇關於軟體架構風格的論文，此文一出，威震四方！國內外許多知名網際網路公司紛紛開始採用這種輕量級的Web服務，大家習慣將其稱為RESTful Web Services，或簡稱REST服務。]

如果將瀏覽器這一端視為前端，而伺服器那一端視為後端的話，可以將以上改進後的MVC模式簡化為以下前後端分離模式，如圖3所示。

可見，有了REST服務，前端關注介面展現，後端關注業務邏輯，分工明確，職責清晰。那麼，如何使用REST服務將應用程式進行前後端分離呢？我們接下來繼續探討，首先我們需要認識REST。

3. 認識REST

REST本質上是使用URL來訪問資源種方式。眾所周知，URL就是我們平常使用的請求地址了，其中包括兩部分：請求方式與請求路徑，比較常見的請求方式是GET與POST，但在REST中又提出了幾種其它型別的請求方式，彙總起來有六種：GET、POST、PUT、DELETE、HEAD、OPTIONS。尤其是前四種，正好與CRUD（Create-Retrieve-Update-Delete，增刪改查）四種操作相對應，例如，GET（查）、POST（增）、PUT（改）、DELETE（刪），這正是REST與CRUD的異曲同工之妙！需要強調的是，REST是“面向資源”的，這裡提到的資源，實際上就是我們常說的領域物件，在系統設計過程中，我們經常通過領域物件來進行資料建模。

REST是一個“無狀態”的架構模式，因為在任何時候都可以由客戶端發出請求到服務端，最終返回自己想要的資料，當前請求不會受到上次請求的影響。也就是說，服務端將內部資源釋出REST服務，客戶端通過URL來訪問這些資源，這不就是SOA所提倡的“面向服務”的思想嗎？所以，REST也被人們看做是一種“輕量級”的SOA實現技術，因此在企業級應用與網際網路應用中都得到了廣泛應用。

下面我們舉幾個例子對REST請求進行簡單描述：

可見，請求路徑相同，但請求方式不同，所代表的業務操作也不同，例如，/advertiser/1這個請求，帶有GET、PUT、DELETE三種不同的請求方式，對應三種不同的業務操作。

雖然REST看起來還是很簡單的，實際上我們往往需要提供一個REST框架，讓其實現前後端分離架構，讓開發人員將精力集中在業務上，而並非那些具體的技術細節。下面我們將使用Java技術來實現這個REST框架，整體框架會基於Spring進行開發。

4. 實現REST框架

4.1 統一響應結構

使用REST框架實現前後端分離架構，我們需要首先確定返回的JSON響應結構是統一的，也就是說，每個REST請求將返回相同結構的JSON響應結構。不妨定義一個相對通用的JSON響應結構，其中包含兩部分：元資料與返回值，其中，元資料表示操作是否成功與返回值訊息等，返回值對應服務端方法所返回的資料。該JSON響應結構如下：

{
	"meta": {
		"success": true,
		"message": "ok"
	},
	"data": ...
}

為了在框架中對映以上JSON響應結構，我們需要編寫一個Response類與其對應：

  1. public class Response {  
  2.     private static final String OK = "ok";  
  3.     private static final String ERROR = "error";  
  4.     private Meta meta;  
  5.     private Object data;  
  6.     public Response success() {  
  7.         this.meta = new Meta(true, OK);  
  8.         return this;  
  9.     }  
  10.     public Response success(Object data) {  
  11.         this.meta = new Meta(true, OK);  
  12.         this.data = data;  
  13.         return this;  
  14.     }  
  15.     public Response failure() {  
  16.         this.meta = new Meta(false, ERROR);  
  17.         return this;  
  18.     }  
  19.     public Response failure(String message) {  
  20.         this.meta = new Meta(false, message);  
  21.         return this;  
  22.     }  
  23.     public Meta getMeta() {  
  24.         return meta;  
  25.     }  
  26.     public Object getData() {  
  27.         return data;  
  28.     }  
  29.     public class Meta {  
  30.         private boolean success;  
  31.         private String message;  
  32.         public Meta(boolean success) {  
  33.             this.success = success;  
  34.         }  
  35.         public Meta(boolean success, String message) {  
  36.             this.success = success;  
  37.             this.message = message;  
  38.         }  
  39.         public boolean isSuccess() {  
  40.             return success;  
  41.         }  
  42.         public String getMessage() {  
  43.             return message;  
  44.         }  
  45.     }  
  46. }  

以上Response類包括兩類通用返回值訊息：ok與error，還包括兩個常用的操作方法：success( )與failure( )，通過一個內部類來展現元資料結構，我們在下文中多次會使用該Response類。

實現該REST框架需要考慮許多問題，首當其衝的就是物件序列化問題。

4.2 實現物件序列化

想要解釋什麼是物件序列化？不妨通過一些例子進行說明。比如，通過瀏覽器傳送了一個普通的HTTP請求，該請求攜帶了一個JSON格式的引數，在服務端需要將該JSON引數轉換為普通的Java物件，這個轉換過程稱為序列化。再比如，在服務端獲取了資料，此時該資料是一個普通的Java物件，然後需要將這個Java物件轉換為JSON字串，並將其返回到瀏覽器中進行渲染，這個轉換過程稱為反序列化。不管是序列化還是反序列化，我們一般都稱為序列化。

實際上，Spring MVC已經為我們提供了這類序列化特性，只需在Controller的方法引數中使用@RequestBody註解定義需要反序列化的引數即可，如以下程式碼片段：

  1. @Controller  
  2. public class AdvertiserController {  
  3.     @RequestMapping(value = "/advertiser", method = RequestMethod.POST)  
  4.     public Response createAdvertiser(@RequestBody AdvertiserParam advertiserParam) {  
  5.         ...  
  6.     }  
  7. }  

若需要對Controller的方法返回值進行序列化，則需要在該返回值上使用@ResponseBody註解來定義，如以下程式碼片段：

  1. @Controller  
  2. public class AdvertiserController {  
  3.     @RequestMapping(value = "/advertiser/{id}", method = RequestMethod.GET)  
  4.     public @ResponseBody Response getAdvertiser(@PathVariable("id") String advertiserId) {  
  5.         ...  
  6.     }  
  7. }  

當然，@ResponseBody註解也可以定義在類上，這樣所有的方法都繼承了該特性。由於經常會使用到@ResponseBody註解，所以Spring提供了一個名為@RestController的註解來取代以上的@Controller註解，這樣我們就可以省略返回值前面的@ResponseBody註解了，但引數前面的@RequestBody註解是無法省略的。實際上，看看Spring中對應@RestController註解的原始碼便可知曉：

  1. @Target({ElementType.TYPE})  
  2. @Retention(RetentionPolicy.RUNTIME)  
  3. @Documented  
  4. @Controller  
  5. @ResponseBody  
  6. public @interface RestController {  
  7.     String value() default "";  
  8. }  

可見，@RestController註解已經被@Controller與@ResponseBody註解定義過了，Spring框架會識別這類註解。需要注意的是，該特性在Spring 4.0中才引入。

因此，我們可將以上程式碼進行如下改寫：

  1. @RestController  
  2. public class AdvertiserController {  
  3.     @RequestMapping(value = "/advertiser", method = RequestMethod.POST)  
  4.     public Response createAdvertiser(@RequestBody AdvertiserParam advertiserParam) {  
  5.         ...  
  6.     }  
  7.     @RequestMapping(value = "/advertiser/{id}", method = RequestMethod.GET)  
  8.     public Response getAdvertiser(@PathVariable("id") String advertiserId) {  
  9.         ...  
  10.     }  
  11. }  

除了使用註解來定義序列化行為以外，我們還需要使用Jackson來提供JSON的序列化操作，在Spring配置檔案中只需新增以下配置即可：

  1. <mvc:annotation-driven>  
  2.     <mvc:message-converters>  
  3.         <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"/>  
  4.     </mvc:message-converters>  
  5. </mvc:annotation-driven>  

若需要對Jackson的序列化行為進行定製，比如，排除值為空屬性、進行縮排輸出、將駝峰轉為下劃線、進行日期格式化等，這又如何實現呢？

首先，我們需要擴充套件Jackson提供的ObjectMapper類，程式碼如下：

  1. public class CustomObjectMapper extends ObjectMapper {  
  2.     private boolean camelCaseToLowerCaseWithUnderscores = false;  
  3.     private String dateFormatPattern;  
  4.     public void setCamelCaseToLowerCaseWithUnderscores(boolean camelCaseToLowerCaseWithUnderscores) {  
  5.         this.camelCaseToLowerCaseWithUnderscores = camelCaseToLowerCaseWithUnderscores;  
  6.     }  
  7.     public void setDateFormatPattern(String dateFormatPattern) {  
  8.         this.dateFormatPattern = dateFormatPattern;  
  9.     }  
  10.     public void init() {  
  11.         // 排除值為空屬性  
  12.         setSerializationInclusion(JsonInclude.Include.NON_NULL);  
  13.         // 進行縮排輸出  
  14.         configure(SerializationFeature.INDENT_OUTPUT, true);  
  15.         // 將駝峰轉為下劃線  
  16.         if (camelCaseToLowerCaseWithUnderscores) {  
  17.             setPropertyNamingStrategy(PropertyNamingStrategy.CAMEL_CASE_TO_LOWER_CASE_WITH_UNDERSCORES);  
  18.         }  
  19.         // 進行日期格式化  
  20.         if (StringUtil.isNotEmpty(dateFormatPattern)) {  
  21.             DateFormat dateFormat = new SimpleDateFormat(dateFormatPattern);  
  22.             setDateFormat(dateFormat);  
  23.         }  
  24.     }  
  25. }  

然後，將CustomObjectMapper注入到MappingJackson2HttpMessageConverter中，Spring配置如下：

  1. <bean id="objectMapper" class="com.xxx.api.json.CustomObjectMapper" init-method="init">  
  2.     <property name="camelCaseToLowerCaseWithUnderscores" value="true"/>  
  3.     <property name="dateFormatPattern" value="yyyy-MM-dd HH:mm:ss"/>  
  4. </bean>  
  5. <mvc:annotation-driven>  
  6.     <mvc:message-converters>  
  7.         <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">  
  8.             <property name="objectMapper" ref="objectMapper"/>  
  9.         </bean>  
  10.     </mvc:message-converters>  
  11. </mvc:annotation-driven>  

通過以上過程，我們已經完成了一個基於Spring MVC的REST框架，只不過該框架還非常單薄，還缺乏很多關鍵性特性，尤其是異常處理。

4.3 處理異常行為

在Spring MVC中，我們可以使用AOP技術，編寫一個全域性的異常處理切面類，用它來統一處理所有的異常行為，在Spring 3.2中才開始提供。使用法很簡單，只需定義一個類，並通過@ControllerAdvice註解將其標註即可，同時需要使用@ResponseBody註解表示返回值可序列化為JSON字串。程式碼如下：

  1. @ControllerAdvice  
  2. @ResponseBody  
  3. public class ExceptionAdvice {  
  4.     /** 
  5.      * 400 - Bad Request 
  6.      */  
  7.     @ResponseStatus(HttpStatus.BAD_REQUEST)  
  8.     @ExceptionHandler(HttpMessageNotReadableException.class)  
  9.     public Response handleHttpMessageNotReadableException(HttpMessageNotReadableException e) {  
  10.         logger.error("引數解析失敗", e);  
  11.         return new Response().failure("could_not_read_json");  
  12.     }  
  13.     /** 
  14.      * 405 - Method Not Allowed 
  15.      */  
  16.     @ResponseStatus(HttpStatus.METHOD_NOT_ALLOWED)  
  17.     @ExceptionHandler(HttpRequestMethodNotSupportedException.class)  
  18.     public Response handleHttpRequestMethodNotSupportedException(HttpRequestMethodNotSupportedException e) {  
  19.         logger.error("不支援當前請求方法", e);  
  20.         return new Response().failure("request_method_not_supported");  
  21.     }  
  22.     /** 
  23.      * 415 - Unsupported Media Type 
  24.      */  
  25.     @ResponseStatus(HttpStatus.UNSUPPORTED_MEDIA_TYPE)  
  26.     @ExceptionHandler(HttpMediaTypeNotSupportedException.class)  
  27.     public Response handleHttpMediaTypeNotSupportedException(Exception e) {  
  28.         logger.error("不支援當前媒體型別", e);  
  29.         return new Response().failure("content_type_not_supported");  
  30.     }  
  31.     /** 
  32.      * 500 - Internal Server Error 
  33.      */  
  34.     @ResponseStatus(HttpStatus.INTERNAL_SERVER_ERROR)  
  35.     @ExceptionHandler(Exception.class)  
  36.     public Response handleException(Exception e) {  
  37.         logger.error("服務執行異常", e);  
  38.         return new Response().failure(e.getMessage());  
  39.     }  
  40. }  

可見，在ExceptionAdvice類中包含一系列的異常處理方法，每個方法都通過@ResponseStatus註解定義了響應狀態碼，此外還通過@ExceptionHandler註解指定了具體需要攔截的異常類。以上過程只是包含了一部分的異常情況，若需處理其它異常，可新增方法具體的方法。需要注意的是，在執行時從上往下依次呼叫每個異常處理方法，匹配當前異常型別是否與@ExceptionHandler註解所定義的異常相匹配，若匹配，則執行該方法，同時忽略後續所有的異常處理方法，最終會返回經JSON序列化後的Response物件。

4.4 支援引數驗證

我們回到上文所提到的示例，這裡處理一個普通的POST請求，程式碼如下：

  1. @RestController  
  2. public class AdvertiserController {  
  3.     @RequestMapping(value = "/advertiser", method = RequestMethod.POST)  
  4.     public Response createAdvertiser(@RequestBody AdvertiserParam advertiserParam) {  
  5.         ...  
  6.     }  
  7. }  

其中，AdvertiserParam引數包含若干屬性，通過以下類結構可見，它是一個傳統的POJO：

  1. public class AdvertiserParam {  
  2.     private String advertiserName;  
  3.     private String description;  
  4.     // 省略 getter/setter 方法  
  5. }  

如果業務上需要確保AdvertiserParam物件的advertiserName屬性必填，如何實現呢？

若將這類引數驗證的程式碼寫死在Controller中，勢必會與正常的業務邏輯攪在一起，導致責任不夠單一，違背於“單一責任原則”。建議將其引數驗證行為從Controller中剝離出來，放到另外的類中，這裡僅提供一個@Valid註解來定義AdvertiserParam引數，並在AdvertiserParam類中通過@NotEmpty註解來定義advertiserName屬性，就像下面這樣：

  1. @RestController  
  2. public class AdvertiserController {  
  3.     @RequestMapping(value = "/advertiser", method = RequestMethod.POST)  
  4.     public Response createAdvertiser(@RequestBody @Valid AdvertiserParam advertiserParam) {  
  5.         ...  
  6.     }  
  7. }  
  8. public class AdvertiserParam {  
  9.     @NotEmpty  
  10.     private String advertiserName;  
  11.     private String description;  
  12.     // 省略 getter/setter 方法  
  13. }  

這裡的@Valid註解實際上是Validation Bean規範提供的註解，該規範已由Hibernate Validator框架實現，因此需要新增以下Maven依賴到pom.xml檔案中：

  1. <dependency>  
  2.     <groupId>org.hibernate</groupId>  
  3.     <artifactId>hibernate-validator</artifactId>  
  4.     <version>${hibernate-validator.version}</version>  
  5. </dependency>  

需要注意的是，Hibernate Validator與Hibernate沒有任何依賴關係，唯一有聯絡的只是都屬於JBoss公司的開源專案而已。

要實現@NotEmpty註解的功能，我們需要做以下幾件事情。

首先，定義一個@NotEmpty註解類，程式碼如下：

  1. @Documented  
  2. @Target({ElementType.FIELD, ElementType.PARAMETER})  
  3. @Retention(RetentionPolicy.RUNTIME)  
  4. @Constraint(validatedBy = NotEmptyValidator.class)  
  5. public @interface NotEmpty {  
  6.     String message() default "not_empty";  
  7.     Class<?>[] groups() default {};  
  8.     Class<? extends Payload>[] payload() default {};  
  9. }  

以上註解類必須包含message、groups、payload三個屬性，因為這是規範所要求的，此外，需要通過@Constraint註解指定一個驗證器類，這裡對應的是NotEmptyValidator，其程式碼如下：

  1. public class NotEmptyValidator implements ConstraintValidator<NotEmpty, String> {  
  2.     @Override  
  3.     public void initialize(NotEmpty constraintAnnotation) {  
  4.     }  
  5.     @Override  
  6.     public boolean isValid(String value, ConstraintValidatorContext context) {  
  7.         return StringUtil.isNotEmpty(value);  
  8.     }  
  9. }  

以上驗證器類實現了ConstraintValidator介面，並在該介面的isValid( )方法中完成了具體的引數驗證邏輯。需要注意的是，實現介面時需要指定泛型，第一個引數表示驗證註解型別（NotEmpty），第二個引數表示需要驗證的引數型別（String）。

然後，我們需要在Spring配置檔案中開啟該特性，需新增如下配置：

  1. <bean class="org.springframework.validation.beanvalidation.MethodValidationPostProcessor"/>  

最後，需要在全域性異常處理類中新增引數驗證處理方法，程式碼如下：

  1. @ControllerAdvice  
  2. @ResponseBody  
  3. public class ExceptionAdvice {  
  4.     /** 
  5.      * 400 - Bad Request 
  6.      */  
  7.     @ResponseStatus(HttpStatus.BAD_REQUEST)  
  8.     @ExceptionHandler(ValidationException.class)  
  9.     public Response handleValidationException(ValidationException e) {  
  10.         logger.error("引數驗證失敗", e);  
  11.         return new Response().failure("validation_exception");  
  12.     }  
  13. }  

至此，REST框架已集成了Bean Validation特性，我們可以使用各種註解來完成所需的引數驗證行為了。

看似該框架可以在本地成功跑起來，整個架構包含兩個應用，前端應用提供純靜態的HTML頁面，後端應用釋出REST API，前端需要通過AJAX呼叫後端釋出的REST API，然而AJAX是不支援跨域訪問的，也就是說，前後端兩個應用必須在同一個域名下才能訪問。這是非常嚴重的技術障礙，一定需要找到解決方案。

4.5 解決跨域問題

比如，前端應用為靜態站點且部署在http://web.xxx.com域下，後端應用釋出REST API並部署在http://api.xxx.com域下，如何使前端應用通過AJAX跨域訪問後端應用呢？這需要使用到CORS技術來實現，這也是目前最好的解決方案了。

[CORS全稱為Cross Origin Resource Sharing（跨域資源共享），服務端只需新增相關響應頭資訊，即可實現客戶端發出AJAX跨域請求。]

CORS技術非常簡單，易於實現，目前絕大多數瀏覽器均已支援該技術（IE8瀏覽器也支援了），服務端可通過任何程式語言來實現，只要能將CORS響應頭寫入response物件中即可。

下面我們繼續擴充套件REST框架，通過CORS技術實現AJAX跨域訪問。

首先，我們需要編寫一個Filter，用於過濾所有的HTTP請求，並將CORS響應頭寫入response物件中，程式碼如下：

  1. public class CorsFilter implements Filter {  
  2.     private String allowOrigin;  
  3.     private String allowMethods;  
  4.     private String allowCredentials;  
  5.     private String allowHeaders;  
  6.     private String exposeHeaders;  
  7.     @Override  
  8.     public void init(FilterConfig filterConfig) throws ServletException {  
  9.         allowOrigin = filterConfig.getInitParameter("allowOrigin");  
  10.         allowMethods = filterConfig.getInitParameter("allowMethods");  
  11.         allowCredentials = filterConfig.getInitParameter("allowCredentials");  
  12.         allowHeaders = filterConfig.getInitParameter("allowHeaders");  
  13.         exposeHeaders = filterConfig.getInitParameter("exposeHeaders");  
  14.     }  
  15.     @Override  
  16.     public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {  
  17.         HttpServletRequest request = (HttpServletRequest) req;  
  18.         HttpServletResponse response = (HttpServletResponse) res;  
  19.         if (StringUtil.isNotEmpty(allowOrigin)) {  
  20.             List<String> allowOriginList = Arrays.asList(allowOrigin.split(","));  
  21.             if (CollectionUtil.isNotEmpty(allowOriginList)) {  
  22.                 String currentOrigin = request.getHeader("Origin");  
  23.                 if (allowOriginList.contains(currentOrigin)) {  
  24.                     response.setHeader("Access-Control-Allow-Origin", currentOrigin);  
  25.                 }  
  26.             }  
  27.         }  
  28.         if (StringUtil.isNotEmpty(allowMethods)) {  
  29.             response.setHeader("Access-Control-Allow-Methods", allowMethods);  
  30.         }  
  31.         if (StringUtil.isNotEmpty(allowCredentials)) {  
  32.             response.setHeader("Access-Control-Allow-Credentials", allowCredentials);  
  33.         }  
  34.         if (StringUtil.isNotEmpty(allowHeaders)) {  
  35.             response.setHeader("Access-Control-Allow-Headers", allowHeaders);  
  36.         }  
  37.         if (StringUtil.isNotEmpty(exposeHeaders)) {  
  38.             response.setHeader("Access-Control-Expose-Headers", exposeHeaders);  
  39.         }  
  40.         chain.doFilter(req, res);  
  41.     }  
  42.     @Override  
  43.     public void destroy() {  
  44.     }  
  45. }  

以上CorsFilter將從web.xml中讀取相關Filter初始化引數，並將在處理HTTP請求時將這些引數寫入對應的CORS響應頭中，下面大致描述一下這些CORS響應頭的意義：

  • Access-Control-Allow-Origin：允許訪問的客戶端域名，例如：http://web.xxx.com，若為*，則表示從任意域都能訪問，即不做任何限制。
  • Access-Control-Allow-Methods：允許訪問的方法名，多個方法名用逗號分割，例如：GET,POST,PUT,DELETE,OPTIONS。
  • Access-Control-Allow-Credentials：是否允許請求帶有驗證資訊，若要獲取客戶端域下的cookie時，需要將其設定為true。
  • Access-Control-Allow-Headers：允許服務端訪問的客戶端請求頭，多個請求頭用逗號分割，例如：Content-Type。
  • Access-Control-Expose-Headers：允許客戶端訪問的服務端響應頭，多個響應頭用逗號分割。

需要注意的是，CORS規範中定義Access-Control-Allow-Origin只允許兩種取值，要麼為*，要麼為具體的域名，也就是說，不支援同時配置多個域名。為了解決跨多個域的問題，需要在程式碼中做一些處理，這裡將Filter初始化引數作為一個域名的集合（用逗號分隔），只需從當前請求中獲取Origin請求頭，就知道是從哪個域中發出的請求，若該請求在以上允許的域名集合中，則將其放入Access-Control-Allow-Origin響應頭，這樣跨多個域的問題就輕鬆解決了。

以下是web.xml中配置CorsFilter的方法：

  1. <filter>  
  2.     <filter-name>corsFilter</filter-name>  
  3.     <filter-class>com.xxx.api.cors.CorsFilter</filter-class>  
  4.     <init-param>  
  5.         <param-name>allowOrigin</param-name>  
  6.         <param-value>http://web.xxx.com</param-value>  
  7.     </init-param>  
  8.     <init-param>  
  9.         <param-name>allowMethods</param-name>  
  10.         <param-value>GET,POST,PUT,DELETE,OPTIONS</param-value>  
  11.     </init-param>  
  12.     <init-param>  
  13.         <param-name>allowCredentials</param-name>  
  14.         <param-value>true</param-value>  
  15.     </init-param>  
  16.     <init-param>  
  17.         <param-name>allowHeaders</param-name>  
  18.         <param-value>Content-Type</param-value>  
  19.     </init-param>  
  20. </filter>  
  21. <filter-mapping>  
  22.     <filter-name>corsFilter</filter-name>  
  23.     <url-pattern>/*</url-pattern>  
  24. </filter-mapping>  

完成以上過程即可實現AJAX跨域功能了，但似乎還存在另外一個問題，由於REST是無狀態的，後端應用釋出的REST API可在使用者未登入的情況下被任意呼叫，這顯然是不安全的，如何解決這個問題呢？我們需要為REST請求提供安全機制。

4.6 提供安全機制

解決REST安全呼叫問題，可以做得很複雜，也可以做得特簡單，可按照以下過程提供REST安全機制：

  1. 當用戶登入成功後，在服務端生成一個token，並將其放入記憶體中（可放入JVM或Redis中），同時將該token返回到客戶端。
  2. 在客戶端中將返回的token寫入cookie中，並且每次請求時都將token隨請求頭一起傳送到服務端。
  3. 提供一個AOP切面，用於攔截所有的Controller方法，在切面中判斷token的有效性。
  4. 當登出時，只需清理掉cookie中的token即可，服務端token可設定過期時間，使其自行移除。

首先，我們需要定義一個用於管理token的介面，包括建立token與檢查token有效性的功能。程式碼如下：

  1. public interface TokenManager {  
  2.     String createToken(String username);  
  3.     boolean checkToken(String token);  
  4. }  

然後，我們可提供一個簡單的TokenManager實現類，將token儲存到JVM記憶體中。程式碼如下：

  1. public class DefaultTokenManager implements TokenManager {  
  2.     private static Map<String, String> tokenMap = new ConcurrentHashMap<>();  
  3.     @Override  
  4.     public String createToken(String username) {  
  5.         String token = CodecUtil.createUUID();  
  6.         tokenMap.put(token, username);  
  7.         return token;  
  8.     }  
  9.     @Override  
  10.     public boolean checkToken(String token) {  
  11.         return !StringUtil.isEmpty(token) && tokenMap.containsKey(token);  
  12.     }  
  13. }  

需要注意的是，如果需要做到分散式叢集，建議基於Redis提供一個實現類，將token儲存到Redis中，並利用Redis與生俱來的特性，做到token的分散式一致性。

然後，我們可以基於Spring AOP寫一個切面類，用於攔截Controller類的方法，並從請求頭中獲取token，最後對token有效性進行判斷。程式碼如下：

  1. public class SecurityAspect {  
  2.     private static final String DEFAULT_TOKEN_NAME = "X-Token";  
  3.     private TokenManager tokenManager;  
  4.     private String tokenName;  
  5.     public void setTokenManager(TokenManager tokenManager) {  
  6.         this.tokenManager = tokenManager;  
  7.     }  
  8.     public void setTokenName(String tokenName) {  
  9.         if (StringUtil.isEmpty(tokenName)) {  
  10.             tokenName = DEFAULT_TOKEN_NAME;  
  11.         }  
  12.         this.tokenName = tokenName;  
  13.     }  
  14.     public Object execute(ProceedingJoinPoint pjp) throws Throwable {  
  15.         // 從切點上獲取目標方法  
  16.         MethodSignature methodSignature = (MethodSignature) pjp.getSignature();  
  17.         Method method = methodSignature.getMethod();  
  18.         // 若目標方法忽略了安全性檢查，則直接呼叫目標方法  
  19.         if (method.isAnnotationPresent(IgnoreSecurity.class)) {  
  20.             return pjp.proceed();  
  21.         }  
  22.         // 從 request header 中獲取當前 token  
  23.         String token = WebContext.getRequest().getHeader(tokenName);  
  24.         // 檢查 token 有效性  
  25.         if (!tokenManager.checkToken(token)) {  
  26.             String message = String.format("token [%s] is invalid", token);  
  27.             throw new TokenException(message);  
  28.         }  
  29.         // 呼叫目標方法  
  30.         return pjp.proceed();  
  31.     }  
  32. }  

若要使SecurityAspect生效，則需要新增如下Spring 配置：

  1. <bean id="securityAspect" class="com.xxx.api.security.SecurityAspect">  
  2.     <property name="tokenManager" ref="tokenManager"/>  
  3.     <property name="tokenName" value="X-Token"/>  
  4. </bean>  
  5. <aop:config>  
  6.     <aop:aspect ref="securityAspect">  
  7.         <aop:around method="execute" pointcut="@annotation(org.springframework.web.bind.annotation.RequestMapping)"/>  
  8.     </aop:aspect>  
  9. </aop:config>  

最後，別忘了在web.xml中新增允許的X-Token響應頭，配置如下：

  1. <init-param>  
  2.     <param-name>allowHeaders</param-name>  
  3.     <param-value>Content-Type,X-Token</param-value>  
  4. </init-param>  

總結

本文從經典的MVC模式開始，對MVC模式是什麼以及該模式存在的不足進行了簡述。然後引出瞭如何對MVC模式的改良，讓其轉變為前後端分離架構，以及解釋了為何要進行前後端分離。最後通過REST服務將前後端進行解耦，並提供了一款基於Java的REST框架的主要實現過程，尤其是需要注意的核心技術問題及其解決方案。希望本文對正在探索前後端分離的讀者們有所幫助，期待與大家共同探討。

相關推薦

ReactJS +Spring MVC前後端分離 RESTful 互動

After building your project and after the prototype We may want to find a way to find a connection of React front to the Java API

從MVC到前後端分離

摘要：MVC模式早在上個世紀70年代就誕生了，直到今天它依然存在，可見生命力相當之強。MVC模式最早用於Smalltalk語言中，最後在其它許多開發語言中都得到了很好的應用，例如，Java中的Struts、Spring MVC等框架。 1. 理解MVC MVC是一種經典的

REST風格框架實戰：從MVC到前後端分離(附完整Demo)

摘要： 　　本人在前輩《從MVC到前後端分離（REST-個人也認為是目前比較流行和比較好的方式）》一文的基礎上，實現了一個基於Spring的符合REST風格的完整Demo，具有MVC分層結構並實現前後端分離，該專案體現了一個具有REST風格專案的基本特徵，即具有統一響應結構、 前後臺數據流轉機制(HTTP

從MVC到Ajax再到前後端分離的思考

轉自：從MVC到Ajax再到前後端分離的思考 從MVC到Ajax再到前後端分離的思考 <div class="postBody"> <div id="cnblogs_post_bod

從MVC到前後端分離(Rest框架搭建)

1、理解 MVC        MVC 是一種經典的設計模式，全名為 Model-View-Controller，即 模型-檢視-控制器。其中，模型 是用於封裝資料的載體，例如，在 Java 中一般通過一個簡單的POJO（Plain Ordinary Java Object

javaweb開發：從傳統的MVC架構到現在流行的前後端分離開發架構(RESTful架構)

本文介紹傳統的MVC框架和現代的RESTful架構.介紹他們之間的對比。 傳統的MVC框架vs基於RESTful架構前後端分離的開發架構 傳統方法 對於傳統的java'開發，我們使用常用的一處框架是SSH（spring+struts+Hibernate），SSM(spri

從MVC到前後端分離（REST-個人也認為是目前比較流行和比較好的方式）

摘要：MVC模式早在上個世紀70年代就誕生了，直到今天它依然存在，可見生命力相當之強。MVC模式最早用於Smalltalk語言中，最後在其它許多開發語言中都得到了很好的應用，例如，Java中的Struts、Spring MVC等框架。 1. 理解MVC MVC是一種經典的設

全程真實數據對接 帶你從0開發前後端分離的企業級上線項目

詳情 支付 開發 線上 完成 分享 提取 rom AC <ignore_js_op> 第1章 課程介紹（2018配套教程：電商前端＋電商後端＋電商權限管理系統課程）本章中會先讓大家了解課程整體情況，然後手把手帶大家做一些開發前的準備工作。後臺管理系統測試賬號和密

MVC與前後端分離

1、MVC MVC是一種經典的設計模式，Model-View-Controller，即模型-檢視-控制器。M主要負責資料與模型，V主要負責顯示，C主要負責互動與業務。 1) 模型是用於封裝資料的載體，其本質是一個普通的Java Bean，包含一系列的成員變數及其getter/set

真實資料對接 從0開發前後端分離的企業級上線專案

=》前往下載 第1章 課程介紹（2018配套教程：電商前端＋電商後端＋電商許可權管理系統課程） 本章中會先讓大家瞭解課程整體情況，然後手把手帶大家做一些開發前的準備工作。後臺管理系統測試賬號和密碼（切勿修改，導致其他同學體驗不了） 賬號：admin 密碼：admin （Java一期課程I

shiro，基於springboot，基於前後端分離，從登入認證到鑑權，從入門到放棄

這個demo是基於springboot專案的。 名詞介紹： ShiroShiro 主要分為 安全認證 和 介面授權 兩個部分，其中的核心元件為 Subject、 SecurityManager、 Realms，公共部分 Shiro 都已經為我們封裝好了，我們只需要按照一定的規則去編寫響應的程式碼即可…

Java,前後端分離，從VUE傳到後臺的資料的相關操作

獲取： Map<String, Object> paramMap = (Map<String, Object>) request.getAttribute("data"); Map<String, Object> formMap = (Map<Strin

最新對接真實資料 從0開發前後端分離企業級上線專案實戰

第1章 課程介紹（2018配套教程：電商前端＋電商後端＋電商許可權管理系統課程）本章中會先讓大家瞭解課程整體情況，然後手把手帶大家做一些開發前的準備工作。後臺管理系統測試賬號和密碼（切勿修改，導致其他同學體驗不了）        賬號

從壹開始前後端分離 [ Vue2.0+.NET Core2.1] 二十║Vue基礎終篇：元件詳解+專案說明

緣起 新的一天又開始啦，大家也應該看到我的標題了，是滴，Vue基礎基本就到這裡了，咱們回頭看看這一路，如果你都看了，並且都會寫了，那麼現在你就可以自己寫一個Demo了，如果再瞭解一點路由，ajax請求（這裡是axios），那麼你就可以準備面試前端了，哈哈，當然沒有這麼誇張，往後的路還很長，至少咱們基礎都會了

從壹開始前後端分離 [ Vue2.0+.NET Core2.1] 二十一║Vue實戰：開發環境搭建【詳細版】

緣起  哈嘍大家好，兜兜轉轉終於來到了Vue實戰環節，前邊的 6 篇關於Vue基礎文章我剛剛簡單看了看，感覺寫的還是不行呀，不是很系統，所以大家可能看上去比較累，還是得抽時間去潤潤色，修改修改語句和樣式，至少也得對得住粉絲哈，應該給部落格園官方提個小建議，要是能允許好友或者其他人修改文章的功能就好了，比如百

從壹開始前後端分離【 .NET Core2.0 +Vue2.0 】框架之十二 || 三種跨域方式比較，DTOs(資料傳輸物件)初探

更新反饋 1、博友@童鞋說到了，Nginx反向代理實現跨域，因為我目前還沒有使用到，給忽略了，這次記錄下，為下次補充。 程式碼已上傳Github+Gitee，文末有地址 　　今天忙著給小夥伴們提出的問題解答，時間上沒把握好，都快下班了，趕緊釋出：書說上文《從壹開始前

從壹開始前後端分離 [ Vue2.0+.NET Core2.1] 二十三║Vue實戰：Vuex 其實很簡單

前言 哈嘍大家週五好，馬上又是一個週末了，下週就是中秋了，下下週就是國慶啦，這裡先祝福大家一個比一個假日嗨皮啦~~轉眼我們的專題已經寫了第 23 篇了，好幾次都堅持不下去想要中斷，不過每當看到群裡的交流，看到部落格下邊好多小夥伴提出問題，我又燃起了鬥志，不過這兩天感冒了，所以更新的比較晚，這裡也提醒大家，節

從壹開始前後端分離 [ Vue2.0+.NET Core2.1] 二十四║ Vuex + JWT 實現授權驗證登陸

壹週迴顧 哈嘍，又是元氣滿滿的一個週一，又與大家見面了，週末就是團圓節了，正好咱們的前後端也要團圓了，為什麼這麼說呢，因為以後的開發可能就需要前後端一起了，兩邊也終於會師了，還有幾天Vue系列就基本告一段落了，大家也好好加油鴨，今天將的內容呢，其實細心的你看到題目應該就能大家猜到了，前提是一直看本系列的小夥

從零開始搭建django前後端分離專案 系列一（技術選型）

前言 最近公司要求基於公司的hadoop平臺做一個關於電信行動網路的資料分析平臺，整個專案需求大體分為四大功能模組：資料探勘分析、報表資料查詢、GIS地理化展示、任務監控管理。由於頁面功能較複雜，所以採用前後端分離方式開發。前端採用webpack+vue+vue-router+axios技術棧，後端用djan

從零開始搭建django前後端分離專案 系列二（專案搭建）

在開始專案之前，假設你已瞭解以下知識：webpack配置、vue.js、django。這裡不會教你webpack的基本配置、熱更新是什麼，也不會告訴你如何開始一個django專案，有需求的請百度，相關的文章已經很多了。  下面開始一步一步構建完整的專案： 1、開發環境準備 win7 x64 python 3.